如何在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（）等）在所有子控制器中創建這些參考
• 將幾個關鍵事件鏈接到子控制器中的基本控制器處理程序。