"this" in a extjs class member method

Question

I am using ExtJS 4.1.1. I extended a class from Ext.TabPanel, and added a new method "removeAllTabs()". The belowing is my code:

MyTabPanel = Ext.extend(Ext.TabPanel, {
    extend: 'Ext.tab.Panel',
    removeAllTabs:function(){
        this.items.each(function(item){
            this.remove(item);
        });
    }
}); 
tabPanel = Ext.create('MyTabPanel', {
    activeTab: 0,
    autoDestroy: false,
    defaults :{
        autoScroll: true,
        bodyPadding: 10,
        closeAction: "hide",
    },
    items: []
});

I can add some tabs to it dynamiclly like this:

tabPanel.add(App.tab1); tabPanel.add(App.tab2);

Then I call this methmod to remove all tabs at somewhere:

tabPanel.removeAllTabs();

No error is reported, but nothing could be removed.

Then I modified the method as this:

MyTabPanel = Ext.extend(Ext.TabPanel, {
    extend: 'Ext.tab.Panel',
    removeAllTabs:function(panel){
        panel.items.each(function(item){
            panel.remove(item);
        });
    }
});

Then I call this methmod at somewhere:

tabPanel.removeAllTabs(tabPanel);

It can works well.

Why doesn't "this" work? How can I use "this" to achieve this purpose?

Thanks!

score 0 · Accepted Answer · answered Aug 08 '14 at 06:27

0

In your each callback, this is not the same this as in removeAllTabs

Solution: Use a variable to store the outer this

removeAllTabs: function () {
    var self = this;
    this.items.each(function(item){
        self.remove(item);
    });
}

answered Aug 08 '14 at 06:27

Ferdi265

2,879
1
17
15

score 0 · Answer 2 · answered Aug 08 '14 at 06:30

"this" changes between the 2 functions. removeAllTabs has the right "this" but the function passed to "each" has a different "this" You have to store a reference to "this" in a variable like "me" so that the inner function has a reference to the correct "this"

The inner function's "this" refers to the anonymous function passed in.

MyTabPanel = Ext.extend(Ext.TabPanel, {
    extend: 'Ext.tab.Panel',
    removeAllTabs:function(){
        var me = this;
        me.items.each(function(item){
            me.remove(item);
        });
    }
});
tabPanel = Ext.create('MyTabPanel', {
    activeTab: 0,
    autoDestroy: false,
    defaults :{
        autoScroll: true,
        bodyPadding: 10,
        closeAction: "hide",
    },
    items: []
});

score 0 · Answer 3 · answered Aug 08 '14 at 06:33

0

As an alternative you could specify the scope for your each() function and not change the other code at all:

removeAllTabs:function(){
    this.items.each(function(item){
        this.remove(item);
    }, this);
}        ^----- this is the scope

References:

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.util.AbstractMixedCollection-method-each

answered Aug 08 '14 at 06:33

zerkms

249,484
69
436
539

Helpful reference. Thanks! – old bird Aug 08 '14 at 06:46

"this" in a extjs class member method

3 Answers3