如何在 ExtJS 4 中执行控制器继承? [英] How to Perform Controller Inheritance in ExtJS 4?

问题描述

我希望编写一个相当复杂的应用程序，其中包含多个基础"项目(基础表单、基础网格等)，其他项目将从这些项目中继承以遵循 DRY.这些基本项目将具有所有继承项目都会触发的公共事件.既然是这种情况，我将需要某种基本控制器来侦听这些项目事件.

I'm looking to write a fairly complex application that would involve having several "base" items (a base form, a base grid, etc.) that other items would inherit from in order to follow DRY. These base items would have common events that all inheriting items would fire. Since this is the case, I'll need some kind of base controller that will listen for these items events.

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

What's the base way to set up a controller to easily be inherited / extended?

推荐答案

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

This is exactly what we're doing in our project. Here are couple samples for grid/controller combo:

基础网格:

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

  }, 
});

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

Hope these couple samples help. The basic ideas are these:

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

这篇关于如何在 ExtJS 4 中执行控制器继承?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！