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

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

在下面的代码中，我演示了如何使用MyExtendedGrid扩展控制器MyGrid。 我意识到我重写了MyGrid控制器中的init函数，因此它永远不会被调用。 通过从MyExtendedGrid初始化中调用MyGrid中的“super”初始化，还是合并控制对象，问题是否简单解决？ 这是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()
            }
        });
    }
});

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);
    }
});

---

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

我在问题中扩展了我的gridview。

我为基础网格提供了自己的控制器来执行常用功能，例如，在网格中选择某些内容时， 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
        }
...

---

这实际上有点棘手......

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

在基本控制器中保持init函数。

在这个基础控制器中定义通用基础方法（比如gridRendered - 你需要为所有控制器始终做一些事情）。

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

我可以发布几个源代码片段，但我认为它非常简单。

链接地址: http://www.djcxy.com/p/76387.html

上一篇: Extending controller in ExtJS 4 MVC application

下一篇: ExtJS 4 MVC multiple instances of views and sub/child controller difficulties