Question

我定义了一个名为Ext.grid.Panel的{{1}}，其中包含一个名为JobList的{{1}}的Ext按钮。 itemId有一个控制器。在控制器中，我有以下代码：

myButton

然后，我使用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(); } });的两个实例，其ID为jobList和Ext.create。问题是当我在jobList1列表中选择一个作业时，它会启用jobList2上的jobList2而非myButton。如何在jobList1的每个实例上正确启用jobList2？

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中每个视图实例都有自己的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();
    }
});

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

2 个答案: