1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    8
    Vote Rating
    0
    chandlersong is on a distinguished road

      0  

    Default Answered: different behavior of changing config by extjs.apply

    Answered: different behavior of changing config by extjs.apply


    Code:
    Ext.define('extjs.example.mypanel',{
            extend:'Ext.panel.Panel',
            layout: {
                type: 'vbox',
                align : 'stretch',
                pack  : 'start',
             },
            initComponent: function(config) {
                Ext.apply(this.subpanel,{
                html:'panel changed',
                listeners:{
                        click: function(){alert('hi');},
                        element: 'body'
                }
            } 
                );
                Ext.apply(this,{
                    items: [
                        this.subpanel,
                        {html:'panel 2', height:150},
                        {html:'panel 3', height:150}
                    ]
                } 
                );
                this.callParent(arguments);
            },
            subpanel:Ext.create('Ext.panel.Panel',{
                html:'panel 1', 
                height:150
            })
    }
    );
    Ext.onReady(function() {
        Ext.create('extjs.example.mypanel', {
            renderTo: Ext.getBody(),
            height:500,
            width: 500
        });
     
    });
    it's code. I want to study how to use Ext.apply. here, I change two configuration by this method. one is html and another is listeners.
    but I found that the html changed works. but the listeners don't.


    My question is that:
    1) what is my problem? I did wrong or some config can't be changed by Ext.apply?
    2)if I did wrong, how to correct it?
    3)if some config can't use Ext.apply? is there any rules or doc about it?

  2. Quote Originally Posted by chandlersong View Post
    1) do you have doc about life cycle of component? Because I get your point, and I know my shortcoming here is I have no idea about component's life cycle.
    I am afraid that you have to collect this information from many sources. Sometimes by reading source code. However, here is some you should read:
    - http://docs.sencha.com/ext-js/4-1/#!/guide/components
    - http://docs.sencha.com/ext-js/4-1/#!...til.Renderable

    Quote Originally Posted by chandlersong View Post
    2) is there any way that I can change configuration after the component has been instantiated? not for this case, just for learning.
    It depends. Some configs become component properties and you can assign new values to them. Some you could access by using getters and setters. Some we have to do some tricks to change their values and some could not be changed. The best place to see what we could do with each component is from API Document.

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Quote Originally Posted by chandlersong View Post
    Code:
    Ext.define('extjs.example.mypanel',{
            extend:'Ext.panel.Panel',
            layout: {
                type: 'vbox',
                align : 'stretch',
                pack  : 'start',
             },
            initComponent: function(config) {
                Ext.apply(this.subpanel,{
                html:'panel changed',
                listeners:{
                        click: function(){alert('hi');},
                        element: 'body'
                }
            } 
                );
                Ext.apply(this,{
                    items: [
                        this.subpanel,
                        {html:'panel 2', height:150},
                        {html:'panel 3', height:150}
                    ]
                } 
                );
                this.callParent(arguments);
            },
            subpanel:Ext.create('Ext.panel.Panel',{
                html:'panel 1', 
                height:150
            })
    }
    );
    Ext.onReady(function() {
        Ext.create('extjs.example.mypanel', {
            renderTo: Ext.getBody(),
            height:500,
            width: 500
        });
    });
    it's code. I want to study how to use Ext.apply. here, I change two configuration by this method. one is html and another is listeners.
    but I found that the html changed works. but the listeners don't.

    My question is that:
    1) what is my problem? I did wrong or some config can't be changed by Ext.apply?
    2)if I did wrong, how to correct it?
    3)if some config can't use Ext.apply? is there any rules or doc about it?
    1) what is my problem? I did wrong or some config can't be changed by Ext.apply?
    In the scope of initComponent:
    - this.subpanel is an instance of Ext.panel.Panel so applying to listeners to this instance will have no effect. listeners is a config that is available before instantiating component. After the component has been created, you should use <component>.addListener() or <component>.on().
    - this.subpanel is an instance but it is not rendered yet so applying to html still has effect. After the component is rendered, the applying to html will also has no effect. To change html after that, you should use <component>.update().

    2)if I did wrong, how to correct it?



    - Solution 1: Use component config instead of component instance
    Code:
    Ext.onReady(function() {
    
    
        Ext.define('extjs.example.mypanel',{
            extend:'Ext.panel.Panel',
            layout: {
                type : 'vbox',
                align: 'stretch',
                pack : 'start'
            },
            initComponent: function(config) {
                Ext.apply( this.subpanel, {
                    html:'panel changed',
                    listeners:{
                        click: {
                            fn: function(){alert('hi');},
                            element: 'body'
                        }
                    }
                });
                Ext.apply(this,{
                    items: [
                        this.subpanel,
                        {html:'panel 2', height:150},
                        {html:'panel 3', height:150}
                    ]
                });
                this.callParent(arguments);
            },
    //      subpanel: Ext.create('Ext.panel.Panel',{
    //          html:'panel 1', 
    //          height:150
    //      })
            subpanel: {
                html:'panel 1', 
                height:150
            }
        });
    
    
        Ext.create('extjs.example.mypanel', {
            renderTo: Ext.getBody(),
            height:500,
            width: 500
        });
    });
    - Solution 2: Use component instance (not recommended)
    Code:
    Ext.onReady(function() {
    
    
        Ext.define('extjs.example.mypanel',{
            extend:'Ext.panel.Panel',
            layout: {
                type : 'vbox',
                align: 'stretch',
                pack : 'start'
            },
            initComponent: function(config) {
    //            Ext.apply( this.subpanel, {
    //                html:'panel changed',
    //                listeners:{
    //                    click: function(){alert('hi');},
    //                    element: 'body'
    //                }
    //            });
                this.subpanel.html = 'panel changed';
                this.subpanel.on('render', function(){
                    console.log(this.body)
                    this.body.on('click', function(){ alert('hi') })
                }, this.subpanel, {single: true});
    
    
                Ext.apply(this,{
                    items: [
                        this.subpanel,
                        {html:'panel 2', height:150},
                        {html:'panel 3', height:150}
                    ]
                });
                this.callParent(arguments);
            },
            subpanel: Ext.create('Ext.panel.Panel',{
                html:'panel 1', 
                height:150
            })
        });
    
    
        Ext.create('extjs.example.mypanel', {
            renderTo: Ext.getBody(),
            height:500,
            width: 500
        });
    });

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    8
    Vote Rating
    0
    chandlersong is on a distinguished road

      0  

    Default


    thanks,vietits,
    your answer is very helpful.
    and I have two more question?
    1) do you have doc about life cycle of component? Because I get your point, and I know my shortcoming here is I have no idea about component's life cycle.

    2)is there any way that I can change configuration after the component has been instantiated?not for this case, just for learning.

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Quote Originally Posted by chandlersong View Post
    1) do you have doc about life cycle of component? Because I get your point, and I know my shortcoming here is I have no idea about component's life cycle.
    I am afraid that you have to collect this information from many sources. Sometimes by reading source code. However, here is some you should read:
    - http://docs.sencha.com/ext-js/4-1/#!/guide/components
    - http://docs.sencha.com/ext-js/4-1/#!...til.Renderable

    Quote Originally Posted by chandlersong View Post
    2) is there any way that I can change configuration after the component has been instantiated? not for this case, just for learning.
    It depends. Some configs become component properties and you can assign new values to them. Some you could access by using getters and setters. Some we have to do some tricks to change their values and some could not be changed. The best place to see what we could do with each component is from API Document.

Thread Participants: 1

Tags for this Thread