PDA

View Full Version : MVC Controller: Callback on Tab's 'click' event not being invoked



pmonteir
30 Mar 2012, 5:46 AM
Hi,

I am using ExtJS4's MVC architecture for my application.
The UI of my application has a TreePanel and a TabPanel. Depending on the node that is selected in the Tree, I dynamically load the tabs into the tabPanel.

targetURL = '/abc/xyz';
panelToAdd = Ext.widget('mytabpanel');
panelToAdd.loader.load({
url: targetURL,
renderer: "component",
loadMask: true,
scripts: true,
removeAll: true,
scope: this
});

From the target URL on the server, I get the JSON array response which contains multiple tabs with the following details.

{ title: 'Overview',
layout: 'fit',
id: 'MY_DETAILS_OVERVIEW_TAB_ID',
itemId: 'MY_DETAILS_OVERVIEW_TAB_ID',
xtype: 'tab',
listeners: {
activate: function(tab) {
MY.app.getController('MY.system.controller.Overview');
}
}
}


In the Overview controller, I have added the following code:

init: function() {
this.control(
{
'#MY_DETAILS_OVERVIEW_TAB_ID' : {
click: this.addPanel
}
});
},

addPanel: function(tab, event, eventOpts){
alert('add Panel');
}


I would like to add a Panel to the Overview tab when a user clicks on the Tab.
But when I click on the Overview tab, the corresponding addPanel() function is not being invoked. I do not see the alert.

Can someone please tell me what I am doing wrong here?

Regards,
Prashant

vietits
30 Mar 2012, 5:58 AM
It seems due to the controller is not initialized. So let try by fixing your code as below (in red color):


{
title: 'Overview',
layout: 'fit',
id: 'MY_DETAILS_OVERVIEW_TAB_ID',
itemId: 'MY_DETAILS_OVERVIEW_TAB_ID',
xtype: 'tab',
listeners: {
activate: function(tab) {
var ctl = MY.app.getController('MY.system.controller.Overview');
ctl.init();
ctl.init = Ext.emptyFn; // <- this makes sure the controller's init() is called one time only.
}
}
}

pmonteir
30 Mar 2012, 6:04 AM
Hi vietits,

My apologies, I forgot to add that when I launch my application I have created a listener to listen to the "add" Controller event and in the callback I initialise the Controller.


launch: function() {

/*
* for dynamic controller adding, we must handle
* event and call init method of controller
*/
this.controllers.addListener('add',this.onAddController, this);
},
onAddController : function(index, controller, key) {
controller.init(this);
}


I have confirmed that on activate of the "Overview' tab, the init() method of the Overview Controller is invoked correctly.

Regards,
Prashant

pmonteir
1 Apr 2012, 8:24 PM
Im not able to figure out here whether the ComponentQuery selector "MY_DETAILS_OVERVIEW_TAB_ID" is not working or whether the "click" event is not being caught correctly.

How do I debug this further? Im unable to use Firebug, because these JS files are retrieved dynamically.

Any help would be appreciated.

Thanks,
Prashant

pmonteir
1 Apr 2012, 9:14 PM
Looks like the 'click' listener does not work. When I changed the listener to 'activate', the "addPanel" function is called.



init: function() {
this.control({
'#MY_DETAILS_OVERVIEW_TAB_ID' : {
activate: this.addPanel
}
});
},

addPanel: function(tab, event, eventOpts){
alert('add Panel');
}

Might be a bug??

Also, I'm not too sure if this is the right way to do this. When I return the list of tabs from the server, I already have an 'activate' listener embedded there which adds the Controller for the Overview tab. Then in the Controller for the Overview tab, I again add a listener to 'activate' for adding a Panel to the Overview tab. Is this correct?

I also notice that the 'activate' listener is called twice, so in turn addPanel is also being called twice. What is the reason for this? Is 'activate' called when the tabs are rendered and then again when selecting the default tab?


Regards,
Prashant