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

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