Question

In Extjs 4.1, I am attempting to set an active tab. The code for the tab panel (and tab) is below:

var mainmsg = {
    title: "In Box",
    id: "Main",
    items: [
       ...
    ]
};

var magtags = Ext.create('Ext.tab.Panel',{
width: '100%',
height: 440,
layout: 'fit',
items: [ mainmsg,<other panels> ]
});

I would like to set the "mainmsg" panel active (selected?) when an event occurrs (like a button press in another panel). I am doing this using the setActivePanel() method documented for the TabPanel magtags, as shown below:

someEvent(params) {
    magtags.setActiveTab(mainmsg);
    ... do other stuff...
}

but when I make the call to setActiveTab(), I get the following error on Firebug:

Timestamp: 12/10/2012 3:59:25 PM

Error: TypeError: comp.getItemId is not a function

Have I found a bug in ExtJS? or is there some way to prevent this error which appears to be internal to the library?

Someone please advise…

Answer 1

Because mainmsg is just a config for an object, when it gets passed to the items configuration it gets created as an actual component, but the mainmsg reference is still just a config. setActiveTab assumes you’re passing it either:

1. The id of the component
2. The index of the component
3. The component instance

A few other points:

• A width of 100% is redundant, that’s not supported
• A layout ‘fit’ on a tab panel is redundant, it automatically uses a card layout
• You’re probably over-nesting your tab items, since the tab has a title and no layout and then child items, it usually means the child item should be the tab, not be nested inside anything else.