扩展ExtJS 4 MVC应用程序中的控制器

Question

我按照MVC结构构建我的ExtJS 4应用程序.我想制作一个可扩展的网格MyGrid,它具有一些我可以重复使用的功能.因此,我猜,它应该有自己的控制器,它也是扩展的,因此功能是继承的.这怎么做得好？

在下面的代码中,我将说明如何使用MyExtendedGrid扩展控制器MyGrid.我意识到我正在覆盖MyGrid控制器中的init函数,因此它永远不会被调用.问题是通过从MyExtendedGrid init调用MyGrid中的"super" init来解决问题,还是合并控制对象？这是在MVC精神中这样做的正确方法吗？如果是这样,怎么样？

controller/MyGrid.js:

Ext.define('App.controller.MyGrid', {
    extend: 'Ext.app.Controller',
    refs: [
        {
            ref: 'myGridView',
            selector: 'mygrid'
        }
    ],
    init: function() {
        var me=this;
        me.control({
            'mygrid textfield[name=searchField]': {
                change: function() {
                    var view = me.getMyGridView();
                    // Do something with view
                }
            }
        });
    }
});

controller/MyExtendedGrid.js:

Ext.define('App.controller.MyExtendedGrid', {
    extend: 'App.controller.MyGrid',
    views: [
        'grids.MyExtendedGrid'],
    refs: [
        {
            ref: 'myExtendedGridView',
            selector: 'myextendedgrid'
        }
    ],
    init: function() {
        var me=this;
        me.control({
            'myextendedgrid': {
                // Some control code
                // Using getMyExtendedGridView()
            }
        });
    }
});

view/grids/MyGrid.js:

Ext.define('App.view.grids.MyGrid', {
    extend: 'Ext.grid.Panel',
    alias : 'widget.mygrid',
    requires: [
    ],
    store: '', // Not defined here
    columns: [ ], // Not defined here

    initComponent: function() {
        var me = this;
        me.tbar = [
            'Search',
            {
                 xtype: 'textfield',
                 name: 'searchField',
                 hideLabel: true,
                 width: 150
            }
        ];
        me.callParent(arguments);
    }
});

view/grids/MyExtendedGrid.js:

Ext.define('App.view.grids.MyExtendedGrid', {
    extend: 'App.view.grids.MyGrid',
    alias : 'widget.myextendedgrid',
    store: 'MyStore',
    columns: [
        // ...
    ],

    initComponent: function() {
        var me = this;
        me.bbar = [
            //...
        ];
        me.callParent(arguments);
    }
});

Answer 1

好吧，经过一番思考，我决定采用以下解决方案，其优点是 mygrid 不需要了解 myextendgrid。

我按照问题中的方式扩展了我的网格视图。

我为基础网格提供了自己的控制器来执行常见功能，例如deleteButton.setDisable(false)在网格中选择某些内容时。

接下来，我提醒自己，使用refs:[（例如 with selector: 'mygrid'）将模糊地指向基类的两个实例和任何扩展实例。使用时me.control({，我通过使用以下命令从激活的元素遍历来获取相关网格up：

me.control({
    'mygrid textfield[name=searchField]': {
        change: function(searchfield) {
            var grid=searchfield.up('mygrid'); // (mygrid or myextendedgrid!)
            // Do something with view
        }
    }
...

我给扩展网格提供了自己的控制器，在这里我可以使用refs. 我不会从 MyGrid 类（而是从 ）扩展控制器'Ext.app.Controller'，除非我想使用 MyGrid 控制器中的函数或变量。所有控制器均使用以下命令从 app.js 启动：

Ext.application({
    controllers: [
        'MyGrid'
        'MyExtendedGrid',
    ],
...

为了在网格中选择行时获取网格，我将网格存储在选择模型中，如下所示：

在控制器/MyGrid.js 中：

me.control({
    'mygrid': {
        afterrender: function(grid) {
            var selModel=grid.getSelectionModel();
            selModel.myGrid=grid;
        },
        selectionchange: function(selModel, selected, eOpts) {
            var grid=selModel.theLookupGrid;
            // Do something with view
        }
...