如何讓我的控制器調用extjs中正確的視圖組件？

Question

我定義了一個稱爲Ext.grid.PanelJobList具有與稱爲myButton一個itemId一個Ext按鈕。 JobList有一個控制器。在控制器我有以下代碼：

Ext.define('App.controller.JobList', { 
    extend: 'Ext.app.Controller', 
    refs: [ 
    {ref: 'jobList', selector: '#jobList'}, 
    {ref: 'myButton', selector: '#myButton'} 
    ], 
    init: function(){ 
    this.control({ 
     'jobList': { 
     select: this.selectJob 
     } 
    }); 
    }, 
    selectJob: function(){ 
    this.getMyButton().enable(); 
    } 
}); 

我然後使用Ext.create他們的jobList1和jobList2一個id創建jobList兩個實例。問題是，當我選擇上jobList2在列表中的任務會啓用jobList1不jobList2的myButton。如何在jobList的每個實例上正確啓用myButton？

Answer 1

儘量避免的itemId參考，並使用別名來代替：

// in App.view.JobList.js you should have 
Ext.define('App.view.JobList', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.job-list', 
    // ... 
    dockedItems: [{ 
     xtype: 'button', 
     name: 'myButton', 
     text: 'My button', 
    }] 
}); 

// and the in the App.controller.JobList.js: 
    // ... 
    'job-list': { 
     selectionchange: function(model, selected) { 
      var button = model.view.up('job-list').down('button[name=myButton]'); 
      button.setDisabled(Ext.isEmpty(selected)); 
     } 
    } 

檢查例如：https://fiddle.sencha.com/#fiddle/tq1

Answer 2

您使用全局控制器，所以它捕獲所有觀點，即匹配查詢事件。在extjs5中查看MVVM模式。 Sencha做得很好，在MVVM中，每個View的實例都有自己的ViewController實例，所以這種情況永遠不會發生。如果你想堅持使用MVC模式，那麼你需要手動控制它。忘記引用，如果您有多個視圖類的實例，則不能使用它們。只能通過當前組件的查詢獲取其他組件。例如：

Ext.define('App.controller.JobList', { 
    extend: 'Ext.app.Controller', 

    init: function() { 
     this.control({ 
      'jobList': { 
       select: this.selectJob 
      } 
     }); 
    }, 

    selectJob: function(selectionModel){ 
     //first of all you need to get a grid. We have only selectionModel in this event that linked somehow with our grid 
     var grid = selectionModel.view.ownerCt; //or if you find more ellegant way to get a grid from selectionModel, use it 
     var button = grid.down('#myButton'); 
     button.enable(); 
    } 
});