Javascript 如何让控制器在extjs中调用正确的视图组件？

我定义了一个名为JobList的Ext.grid.Panel，它有一个名为myButton的itemId的Ext按钮。作业列表有一个控制器。在控制器中，我有以下代码：

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创建了两个jobList实例，它们的id分别为jobList1和jobList2。问题是，当我在jobList2的列表中选择一个作业时，它将启用jobList1而不是jobList2上的My按钮。如何在作业列表的每个实例上正确启用myButton

尽量避免按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));
        }
     }

---

检查示例：

您使用的是全局控制器，因此它会捕获与查询匹配的所有视图中的事件。查看extjs5中的MVVM模式。Sencha做得很好，在MVVM中，视图的每个实例都有自己的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();
    }
});