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

      0  

    Default Answered: How to call container's method in property class

    Answered: How to call container's method in property class


    Code:
    Ext.define('extjs.example.mypanel',{
        extend:'Ext.panel.Panel',
        
            layout: {
                type: 'vbox',
                align : 'stretch',
                pack  : 'start',
            },
            initComponent: function(config) {
                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,
                 listeners:{
                      click: function(){this.doSomething();},
                      element: 'body'
                 }
            }),
            
            doSomething:function(){
                alert('hi');
            }
    }    
    );
    
    Ext.onReady(function() {
        Ext.create('extjs.example.mypanel', {
            renderTo: Ext.getBody(),
            height:500,
            width: 500
        });
     
    });
    here's a property subpanel, and I add one listener to monitor click event.
    when the subpanel be clicked, I hope the method doSomething in extjs.example.mypanel will be called,
    but i found it can't work. how can I do to make it work

  2. Try this
    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,{
                     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,
                listeners:{
                    click: function(){
                        var cmp = Ext.getCmp(this.id.replace('-body',''));
                        cmp.up('panel').doSomething();
                    },
                    element: 'body'
                }
            }),
            doSomething:function(){
                alert('hi');
            }
        }    
    );
    
    
    Ext.create('extjs.example.mypanel', {
        renderTo: Ext.getBody(),
        height:500,
        width: 500
    });
    
    
    });

  3. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,124
    Answers
    347
    Vote Rating
    514
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Code:
    Ext.define('extjs.example.mypanel', {
        extend: 'Ext.panel.Panel',
    
        layout: {
            type: 'vbox',
            align: 'stretch',
            pack: 'start',
        },
        
        initComponent: function(config) {
            this.subpanel = Ext.create('Ext.panel.Panel', {
                html: 'panel 1',
                height: 150,
                listeners: {
                    scope: this,
                    click: function() {
                        this.doSomething();
                    },
                    element: 'body'
                }
            });
            Ext.apply(this, {
                items: [this.subpanel, {
                    html: 'panel 2',
                    height: 150
                }, {
                    html: 'panel 3',
                    height: 150
                }]
            });
            this.callParent(arguments);
        },
    
        doSomething: function() {
            console.log('click');
        }
    });
    
    Ext.onReady(function() {
        Ext.create('extjs.example.mypanel', {
            renderTo: Ext.getBody(),
            height: 500,
            width: 500
        });
    
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

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

      0  

    Default


    thanks,evant,

    it can work. ,but I'm sorry to say it's not the answer I what.

    I'm a beginner and what i want in this case is how can I call method in a property of class.
    in this case, not use initComponent, just by configure.

    or how can I get the object of ext.example.mypanel in subpanel?

  5. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,124
    Answers
    347
    Vote Rating
    514
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Because you can't. "this" is meant to refer to an object instance. As such, you can't specify the scope on the listener when defining the class, you need to do it inside the instance where "this" points to the current object.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

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

      0  

    Default


    thanks for your reply, I get your point.

    my question is how can I get the object in the property. 'this' is wrong ,is there any other way?

  7. #6
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    109
    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


    Try this
    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,{
                     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,
                listeners:{
                    click: function(){
                        var cmp = Ext.getCmp(this.id.replace('-body',''));
                        cmp.up('panel').doSomething();
                    },
                    element: 'body'
                }
            }),
            doSomething:function(){
                alert('hi');
            }
        }    
    );
    
    
    Ext.create('extjs.example.mypanel', {
        renderTo: Ext.getBody(),
        height:500,
        width: 500
    });
    
    
    });

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar