View Full Version : getCard not available from tab activate listener

30 Jun 2010, 10:23 AM
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); } }}] });
} });

30 Jun 2010, 10:46 AM
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.

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

30 Jun 2010, 11:04 AM
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/docs/source/TabPanel.html#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;

30 Jun 2010, 11:12 AM
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);

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


30 Jun 2010, 11:18 AM
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

30 Jun 2010, 11:19 AM
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();

30 Jun 2010, 11:24 AM
Now I get why I was confused... the Tab documentation read:

activate (http://www.sencha.com/deploy/touch/docs/source/TabPanel.html#event-Ext.Tab-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 :)

30 Jun 2010, 11:31 AM
Totally agree. ;) At least we are all on the same page now.