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

我希望编写一个相当复杂的应用程序，它将涉及到几个“基本”项（基本表单、基本网格等），其他项将继承这些项，以便遵循DRY。这些基本项将具有所有继承项都将触发的公共事件。既然是这样，我需要某种基本控制器来监听这些事件

---

将控制器设置为易于继承/扩展的基本方法是什么？

这正是我们在项目中所做的。以下是网格/控制器组合的两个示例：

基本网格：

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

});

基本控制器：

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
    },

});

儿童网格：

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

});

儿童控制器：

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

  }, 
});

希望这对样品能有所帮助。基本思路如下：

• 将尽可能多的代码放入基控件和基控件中 控制器
• 在基本控制器中使用refs函数（getGrid（）等）
• 不要忘记在所有子控制器中创建这些参照
• 将多个关键事件链接到子控制器中的基本控制器处理程序