PDA

View Full Version : [4.0.7] multiple listeners on single grid.panel component



lorezyra
14 Dec 2011, 11:50 PM
I'm attempting to listen for 3 events on a single (grid) component. The problem I'm experiencing is that only 1 of the configured listeners appears to fire. When I comment out the listeners and have only one listener, that listener fires and the registered function does it's work. All three function work as expected. There are no errors thrown. It's just only one of the 3 listeners would work and it didn't matter which one of the events I commented out...

In my example below, I want to capture the itemcontextmenu, selectionchange, and containercontextmenu events on usrViewPanel grid.



Ext.define('RichieBartlett.controller.usrMangerTAB', {
extend: 'Ext.app.Controller',
//stores:[''],
views: ['usrMangerTAB'],
refs: [{
ref: 'UsrMangerTAB',
selector: 'usrMangerTAB'
}, {
ref: 'GrpViewPanel',
selector: 'grpViewPanel'
}, {
ref: 'UsrViewPanel',
selector: 'usrViewPanel'
}],
init: function () {
if (Ext.isGecko && debug){console.log(" usrMangerTAB.controllerInit()"); }
var me=this;
/*
me.application.on({//handle system-application wide events and calls here!!
'event': me.event,
scope: me
});
*/
this.control({//watch line 16982 of ext-4.0.7-gpl/ext-all-debug-w-comments.js for event fires
//...

'[itemId=usrViewPanel]': ({//grid object
itemcontextmenu: me.usrViewPanelRclk,
scope: me
},{
selectionchange: me.usrViewPanelSelected,
scope: me
},{
containercontextmenu: me.cancelContextMenu,
scope: me
}),

}
});
},

//...
usrViewPanelRclk: function ( thisGrid, modelRecord, thisGridEl, rowIndex, evtObj, eListener ) {
evtObj.stopEvent();//prevent browser's context menu
if (thisGrid.rowUCtxMenu) {
thisGrid.rowUCtxMenu.destroy();
}//end if thisGrid menu
var usrMgrTAB=this; //alias
thisGrid.rowUCtxMenu = new Ext.menu.Menu({
id: 'mainUContext'
,items: [{
id: "ctxUMenuTitle"
,disabled: true
,text: "<b>User Menu</b> - id:" + (modelRecord.phantom? " *":modelRecord.get("id"))
}, '-', {
id: "ctxUAdd"
,iconCls: "icon-userMenuAdd"
,text: "New User"
,scope: this
,handler: this.UserViewPanelUsrAddOnClick
},{
id: "ctxUBann"
,iconCls: "icon-TABusrBanned"
,disabled: (modelRecord.get("id")<2 || modelRecord.phantom)
,hidden: (modelRecord.get("id")<2 || modelRecord.phantom)
,text: "Ban User - <i>" + Ext.String.ellipsis(modelRecord.get("username"), 40, true) + "</i>"
,scope: this
,handler: this.usrGRIDitemBan
},{
id: "ctxUBanIP"
,iconCls: "icon-TABusrBanned"
,disabled: (modelRecord.get("id")<2 || modelRecord.phantom)
,hidden: (modelRecord.get("id")<2 || modelRecord.phantom)
,text: "Ban IP - <i>" + modelRecord.get("lastIP") + "</i>"
,scope: this
,handler: this.usrGRIDitemBanIP
},{
id: "ctxUDelete"
,iconCls: "icon-userMenuDel"
,disabled: (modelRecord.get("id")<2 && !modelRecord.phantom)
,hidden: (modelRecord.get("id")<2 && !modelRecord.phantom)
//,text: "Delete - <i>" + (modelRecord.phantom? " (new User) ": "") + Ext.String.ellipsis(modelRecord.get("username"), 40, true) + "</i>" + (modelRecord.phantom? " <B>*</B>":"")
,text: "Delete - <i>" + Ext.String.ellipsis(modelRecord.get("username"), 40, true) + "</i>" + (modelRecord.phantom? " <B>*</B>":"")
,scope: this
,handler: function () {
usrMgrTAB.usrGRIDitemDelete(Ext.String.ellipsis(modelRecord.get("username"), 40, true), modelRecord.get("id") ); }
}, '-',{
id: "ctxUreload"
,iconCls: "icon-reload"
,text: "Refresh"
,scope: this
,handler: this.UserViewPanelUsrReloadOnClick
}]
});
thisGrid.getSelectionModel().select(rowIndex);
thisGrid.rowUCtxMenu.showAt(evtObj.getXY());
},
usrViewPanelSelected: function ( modelRecord, modelRecordSelected, eListener ) {
// if (Ext.isGecko && debug) { console.warn("modelRecord"); console.dir(modelRecord); console.warn("modelRecordSelected"); console.dir(modelRecordSelected); }
if (modelRecord.phantom || modelRecordSelected[0].get("id")<2) {
Ext.getCmp('UserViewPanelUsrBan').disable();
} else {
Ext.getCmp('UserViewPanelUsrBan').enable();
}
},

//...
cancelContextMenu: function(objContainer, e, eOpts){
if (e && typeof(e)=="object" && e.preventDefault){
e.preventDefault();
}else{
Ext.EventObject.stopEvent(e);
}//end if e (mouse/key)
}



});


Am I missing something here? Is this a bug of the 4.0.x version?

lorezyra
14 Dec 2011, 11:58 PM
I have observed that I can use the afterrender event and setup the other listeners using the Ext.getCmp().on() method... However, this is not the best practice. I prefer to have these events setup in my this.control() method of the controller.


Surely, there is a better way.

friend
15 Dec 2011, 6:04 AM
I think your control() config is syntactically incorrect. As a test, refactor as shown below and see what you get:



this.control({
'panel[itemId="usrViewPanel"]': {
itemcontextmenu: this.usrViewPanelRclk,
selectionchange: this.usrViewPanelSelected,
containercontextmenu: this.cancelContextMenu
}
});

lorezyra
15 Dec 2011, 2:48 PM
THANKS!!! =D>

That is what I was missing. Did you forget to include the scope? It now works exactly as I need it!