getCard not available from tab activate listener

[meyerovb]

First alert says 'C1', second alert says 'undefined'

Ext.setup({ onReady: function () {
new Ext.TabPanel({ fullscreen: true, items: [{ title: 'I1' }, { title: 'I2', card: 'C1', 
listeners: { activate: function () { alert(this.card); alert(this.getCard); } }}] });
} });

[TommyMaintz]

We don't have a property (nor a method if you would add parentheses) called getCard and don't see a definition.

You could do the following.

Ext.setup({ 
    onReady: function () {
        new Ext.TabPanel({
            fullscreen: true, 
            items: [{
                title: 'I1' 
            }, {
                title: 'I2', 
                card: 'C1',
                getCard: function() {
                    return this.card;
                },
                listeners: {
                    activate: function () {
                        alert(this.card); 
                        alert(this.getCard()); 
                    } 
                }
            }] 
        });
    } 
});

[meyerovb]

Note: card is not listed as a public property in the Tab documentation.

The reason I was expecting getCard to be there:
If you click on Ext.Tab in the documentation to see the source (http://www.sencha.com/deploy/touch/d...ml#cls-Ext.Tab) you can see the following:

/**
* Retrieves a reference to the card associated with this tab
* @returns {Mixed} card
*/
getCard : function() {
return this.card;
},

[TommyMaintz]

Ah, only now I see what you were trying to do. I never really thought about the fact that people would want to change the card associated to a tab. Thus the fact that it is private and not documented.

Anyway, the reason this.setCard is not defined is because of the scope that the activate handler runs in by default. "this" inside your handler refers to the card, not the tab.

Try applying the following patch (which will probably be part of the next release)

Ext.override(Ext.TabBar, {
    // @private
    onCardAdd : function(panel, card) {
        card.tab = this.add({
            xtype: 'tab',
            card: card
        });
    },

    // @private
    onCardRemove : function(panel, card) {
        var items = this.items.items,
            ln = items.length,
            i, item;

        for (i = 0; i < ln; i++) {
            item = items[i];
            if (item.card === card) {
                item.card = null;
                this.remove(item, true);
                return;
            }
        }
    }
});

then you should be able to do the following in your event handler.

this.tab.setCard(...);

[meyerovb]

Actually I pasted in setCard by mistake I am using getCard because I'm simulating the twitter example, but instead of referencing the twitter panel as a variable, I add the following to my tab panel:

{ iconCls: 'chat', card: new twitter.TimeLine(), title: 'Twitter', listeners: { activate: function () { this.card.store.read(); } }}

I first tried this.getCard() based on the documentation script, but it didn't work. Thanks for the workaround

[TommyMaintz]

In that case you don't need to apply my patch with that override. Like I mentioned before, the default scope of the activate event is the card itself.

In your case you could just do this.store.read();

[meyerovb]

Now I get why I was confused... the Tab documentation read:

activate : ( Ext.Tab this )

Listeners will be called with the following arguments:

• this : Ext.Tab

I assumed this meant the context of the call, not the parameter that gets passed in. So the context is the card, the parameter is the tab, and you still can't call getCard on the tab... got it, thanks. You may want to look into clearing up the documentation, using 'this' as a parameter name can lead to confusion

[TommyMaintz]

Totally agree. At least we are all on the same page now.