inheritance - 如何在 ExtJS 4 中执行 Controller 继承？

Question

我正在寻找编写一个相当复杂的应用程序，该应用程序将涉及具有几个“基本”项目(基本表单、基本网格等)，其他项目将从中继承以遵循 DRY。这些基础项目将具有所有继承项目都会触发的公共(public)事件。既然是这种情况，我需要某种基础 Controller 来监听这些项目事件。

设置 Controller 以轻松继承/扩展的基本方法是什么？

Answer 1

这正是我们在项目中所做的。以下是网格/ Controller 组合的几个示例:

基本网格:

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

});

基础 Controller :

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'
...

});

子 Controller :

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

  }, 
});

希望这对夫妇的样本有所帮助。基本思路如下:

您将尽可能多的代码放入基本控件和基本
Controller

您在基本 Controller 中使用 refs 函数(getGrid() 等)

不要忘记在所有子 Controller 中创建这些引用

将几个关键事件链接到子 Controller 中的基本 Controller 处理程序。