Как выполнить наследование контроллера в ExtJS 4? - PullRequest
Новая
       8

Как выполнить наследование контроллера в ExtJS 4?

11 голосов
/ 09 марта 2012

Я собираюсь написать довольно сложное приложение, которое включало бы несколько «базовых» элементов (базовую форму, базовую сетку и т. Д.), От которых другие элементы наследовали бы, чтобы следовать за DRY.Эти базовые предметы будут иметь общие события, которые будут срабатывать все наследующие предметы.Поскольку это так, мне понадобится некоторый базовый контроллер, который будет прослушивать события этих элементов.

Каков базовый способ настройки контроллера для легкого наследования / расширения?

1 Ответ

11 голосов
/ 09 марта 2012

Это именно то, что мы делаем в нашем проекте.Вот пара примеров для сетки / контроллера:

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 () и т. Д.) В базовых контроллерах
  • Не забудьте создать эти ссылки во всех дочерних контроллерах
  • Связать несколько ключевых событий с обработчиками базовых контроллеров в дочерних контроллерах.
...