Я хочу написать довольно сложное приложение, которое будет включать в себя несколько "базовых" элементов (базовую форму, базовую сетку и т.д.), которые наследуют другие элементы, чтобы следовать DRY. Эти базовые элементы будут иметь общие события, которые будут уничтожены все наследуемые элементы. Поскольку это так, мне нужен какой-то базовый контроллер, который будет прослушивать эти события.
Каков базовый способ настройки контроллера, который легко наследуется/расширяется?
Это именно то, что мы делаем в нашем проекте. Вот пара образцов для компиляции grid/controller:
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);
},
});
Надеемся, что эти образцы образцов помогут. Основные идеи таковы: