如何在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:

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：

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：

ChildGrid:

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

});

ChildController：

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

  }, 
});

希望这些情侣样品有帮助。基本思想是这些：

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

• 您将尽可能多的代码放入基础控件和基础
  控制器


• 在基本控制器中使用refs函数（getGrid（）等）


• 不要忘记在所有子控制器中创建这些引用

• You put as much code as possible into base controls and base controllers
• You use refs functions (getGrid() etc) in base controllers
• Don't forget to create these refs in all child controllers
• Link several key events to the base controller handlers in the child controllers.

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