Results 1 to 6 of 6

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

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    8
    Vote Rating
    0
      0  

    Default 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
    18,438
    Answers
    651
    Vote Rating
    859
      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
      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
    18,438
    Answers
    651
    Vote Rating
    859
      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
      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 User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    114
      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
    });
    
    
    });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •