PDA

View Full Version : when is initialize component event fired?



mauzi75
10 Apr 2012, 3:41 AM
If I load dynamically a component inside a container for the first time (using add function), the initialize event is fired. Then if I remove the component (using remove function with autodestroy set to true) and I add it again, the initialize event is not fired.
Is that correct? When exactly is initialize event fired?

mitchellsimoens
10 Apr 2012, 7:49 AM
The event is fired when the component is created.

mauzi75
10 Apr 2012, 11:50 PM
Ok.. but so, when I remove a component from its container, I destroy only the HTML element, not the javascript object: it remains in memory and is reused every time I add it again, never re-created, right?

mitchellsimoens
11 Apr 2012, 4:27 AM
If the component isn't destroyed then it will not be recreated (depending on your code). By default when you remove a component from a container it will be destroyed.

mauzi75
11 Apr 2012, 5:38 AM
Here a complete example of what I mean:




Ext.Loader.setConfig({
enabled: true
});


Ext.application({
views: [
'Main',
'Sub'
],
name: 'APP',
controllers: [
'Main',
'Sub'
],
launch: function() {
Ext.create('APP.view.Main', {fullscreen: true});
}


});


Ext.define('APP.view.Main', {
extend: 'Ext.Container',
config: {
id: 'Main'
}
});


Ext.define('APP.view.Sub', {
extend: 'Ext.Container',
alias: 'widget.Sub',


config: {
id:'Sub',
html:'Sub Page.'
}


});


Ext.define('APP.controller.Sub', {
extend: 'Ext.app.Controller',


config: {
control: {
"#Sub": {
initialize: 'onSubInitialize'
}
}
},


onSubInitialize: function(component, options) {

console.log("component added/created: initialize event fired!");

}


});


Ext.define('APP.controller.Main', {
extend: 'Ext.app.Controller',


config: {
refs: {
mainPage: '#Main',
subPage: {
selector: '#Sub',
xtype: 'Sub',
autoCreate: true
}
},


control: {
mainPage: {
initialize: 'onMainInitialize'
}
}
},


onMainInitialize: function(component, options) {

console.log('Add component for the first time ..');
this.getMainPage().add(this.getSubPage());

Ext.defer(function(){

console.log('Remove the component added (destroy set to true) ..');
this.getMainPage().remove(this.getSubPage(),true);

},1000,this);


Ext.defer(function(){

console.log('Add component for the second time ..');
this.getMainPage().add(this.getSubPage());

},2000,this);
}


});





and here the console output:




Main.js:38 (http://localhost/test/sencha/app/controller/Main.js?_dc=1334150424421)Add component for the first time ..
Sub.js:29 (http://localhost/test/sencha/app/controller/Sub.js?_dc=1334150424430)component added/created: initialize event fired!
Main.js:43 (http://localhost/test/sencha/app/controller/Main.js?_dc=1334150424421)Remove the component added (destroy set to true) ..
Main.js:50 (http://localhost/test/sencha/app/controller/Main.js?_dc=1334150424421)Add component for the second time ..






as it can see, the initialize event of "sub" component is fired only the first time it is added to "main" component: even if it is removed with destroy set to true, the second time the event is not fired.

mauzi75
11 Apr 2012, 7:08 AM
Ok, after a lot of research and some tests, I understood that if I destroy a component, all refs to events for that component in controllers will "break" and so the listener does not catch anymore the event.

lylepratt
29 Apr 2012, 11:42 AM
I'm having a lot of problems with this same issue. I am defining an Event on my controller to fire every time a panel is initialized. It only ever fires the FIRST TIME the panel is shown/painted/initialized. I've also tried the "painted" and "show" events and they do the same thing. Why is this happening?

@mauzi75 did you figure out how to get around this?

Thanks!

mauzi75
30 Apr 2012, 2:08 AM
As I said above, when you remove a component and then you add it again, all events in controllers with refs to that component refer to old object, not to the new one, so they don't work.
In my case, I've changed all the structure of the application to get it work, avoiding to use initialize event from controller.
Another solution could be here:
http://www.sencha.com/forum/archive/index.php/t-194698.html?

mitchellsimoens
30 Apr 2012, 4:07 AM
Don't use the id config and the listeners n the control config in the controller will work.

lylepratt
30 Apr 2012, 7:08 AM
Thanks for the tip! I had resorted to just adding the listeners manually when I created the panel, but I'd much rather keep things organized with controller actions.

jep
20 May 2012, 8:34 PM
This seems incredibly inconvenient to me. Really wish id wouldn't break control. Is this really "works as intended"? My code is going to look much worse if I have to code around this "feature".

lylepratt
23 May 2012, 9:18 AM
I agree, and I think it should be considered a bug, but its not going to be something straightforward to fix for the Sencha team.

However, its fairly simple to bind the action to something other than ID (you can even use a custom attribute).

jep
23 May 2012, 9:54 AM
See also my other post on the subject:

http://www.sencha.com/forum/showthread.php?207696