when is initialize component event fired?

[mauzi75]

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]

The event is fired when the component is created.

[mauzi75]

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]

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]

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:38Add component for the first time ..
Sub.js:29component added/created: initialize event fired!
Main.js:43Remove the component added (destroy set to true) ..
Main.js:50Add 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]

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]

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]

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/...t-194698.html?

[mitchellsimoens]

Don't use the id config and the listeners n the control config in the controller will work.

[lylepratt]

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.