1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    16
    Vote Rating
    0
    mauzi75 is on a distinguished road

      0  

    Default when is initialize component event fired?

    when is initialize component event fired?


    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?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The event is fired when the component is created.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    16
    Vote Rating
    0
    mauzi75 is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    16
    Vote Rating
    0
    mauzi75 is on a distinguished road

      0  

    Default


    Here a complete example of what I mean:


    Code:
    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:


    Code:
    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.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    16
    Vote Rating
    0
    mauzi75 is on a distinguished road

      0  

    Default


    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.

  7. #7
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159
    Vote Rating
    0
    lylepratt is on a distinguished road

      0  

    Default


    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!
    Twitter: lylepratt

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    16
    Vote Rating
    0
    mauzi75 is on a distinguished road

      0  

    Default


    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?

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Don't use the id config and the listeners n the control config in the controller will work.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159
    Vote Rating
    0
    lylepratt is on a distinguished road

      0  

    Default


    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.
    Twitter: lylepratt