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

Question

我按照 MVC 结构构建我的 ExtJS 4 应用程序。我想制作一个可扩展的网格 MyGrid，它具有一些我可以重复使用多次的功能。因此，我想，它应该有自己的控制器，它也被扩展，以便继承功能。这是如何正确完成的？

在下面的代码中，我说明了如何使用 MyExtendedGrid 扩展控制器 MyGrid。我意识到我正在重写 MyGrid 控制器中的 init 函数，因此它永远不会被调用。问题是否简单地通过从 MyExtendedGrid init 调用 MyGrid 中的“超级”init 或合并 control 对象来解决？这是在 MVC 精神中做到这一点的正确方法吗？如果有，怎么做？

控制器/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
                }
            }
        });
    }
});

控制器/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()
            }
        });
    }
});

查看/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);
    }
});

查看/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

其实有点难……

这是我们在应用程序中所做的（我们有完全相同的情况 - 某种基本控制器，在许多不同的地方重复使用）

1. 在基本控制器中保留初始化函数。

2. 在此基本控制器中定义通用基本方法（如 gridRendered - 您需要始终为所有控制器执行某些操作）。

3. 订阅所有子控制器中的事件，但使用基本控制器的方法订阅事件。否则它将无法工作 - 基本控制器没有适当的参考来正确订阅事件。

我可以发布几个源 sn-ps，但我认为这很简单。

Answer 2

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

我在问题中扩展了我的网格视图。

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

接下来，我提醒自己，使用refs:[（例如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
        }
...