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

  }, 
});

希望这些情侣样本有所帮助。基本的想法是这些：

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

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

1 个答案: