如何在ExtJS 4中执行控制器继承？

Question

我正在寻找一个相当复杂的应用程序，其中涉及其他项目将继承为了跟随DRY的几个“基”项目（基本形式，基础网格等）。这些基地项目将有共同的事件，所有继承项目将触发。既然是这样，我需要一些基本控制器来监听这些事件。

建立一个控制器容易被继承/扩展的基本方法是什么？

Answer 1

这正是我们在我们的项目中所做的。以下是网/控制器组合对采样：

BaseGrid：

Ext.define('BaseGrid', { 
    extend: 'Ext.grid.Panel', 

    initComponent: function() { 
    var me = this; 
    // create common stuff 

    me.on('itemcontextmenu', me.showContextMenu, me); 
    me.callParent(arguments); 
    }, 

    showContextMenu: function(view, rec, node, index, e) { 
    var me = this; 

    if (me.contextMenu === undefined) 
     return; 

    e.stopEvent(); 
    me.contextMenu.showAt(e.getXY()); 
    } 

}); 

BaseController：

Ext.define('BaseController', { 
    extend: 'Ext.app.Controller', 

    init: function() { 
     // put some common stuff 


     this.callParent(arguments); 
    }, 

    gridRendered: function() { 
    // common function to do after grid rendered 
     var me = this, 
      grid = me.getGrid(); // note that base controller doesn't have ref for Grid but we still using it !! 

     gr.contextMenu = me.createContextMenu(); 
    }, 

    createContextMenu: function() { 
     return ... // create context menu common for all grids with common handlers 
    }, 

}); 

ChildGrid：

Ext.define('ChildGrid', { 
    extend: 'BaseGrid', 
    alias: 'widget.child' 
... 

}); 

ChildController：

Ext.define('ChildController', { 
    extend: 'BaseController', 

    refs: [ 
    { ref: 'grid', selector: 'child gridpanel' } // now basecontroller will have something when called getGrid()!! 
    ], 

    init: function() { 
    var me = this; 
    me.control({ 
     'child gridpanel': { 
      afterrender: me.gridRendered, // subscribing to the event - but using method defined in BaseController 
      scope: me 
     } 
    }); 

    me.callParent(arguments); 

    }, 
}); 

希望这对情侣样本有所帮助。其基本思路是这些：

• 你把尽可能多的代码尽可能为基础的控制和基地 控制器
• 您在基地控制器
• 不要忘了使用功能裁判（getGrid（）等）在所有子控制器中创建这些参考
• 将几个关键事件链接到子控制器中的基本控制器处理程序。