CardLayout.setActiveItem not working

[dVyper]

I'm trying to use code found in the laout-browser example.
I've set up a Panel with a card layout and defined two states for the panel:
I can set the 'activeItem' as 0 or 1 in the config and it works fine.
However I want to be able to control the Panel from another Panel. On a panel (called 'tab') which has tabs I've tried to set up this listener:

tab.on('tabchange', function (tab, activatedTab) {
    var comp = Ext.getCmp('eastCentre');
    comp.layout.setActiveItem(1);
});

However when I try to run that the whole window which is displaying my panels does not render at all.
I've found out that I can execute up to:

var panelLayout = Ext.getCmp('eastCentre').layout;

But as soon as I try to execute setActiveItem it fails. Firebug says setActiveItem is not a function. But it's used in line 68 of the layout-browser.js file! How am I supposed to remotely set the active item in the Panel which has a card layout?

[Condor]

Are you sure that the eastCentre panel has card layout and that the panel is rendered?

[dVyper]

Yep - here is the code for it:

var eastCentre = new Ext.Panel({
    id            :    'eastCentre',
    region        : 'center',
    layout: 'card',
    activeItem: 1,
    items        : [notesPanel, invoicePanel]
})

Also, if I try code like this:

var comp = Ext.getCmp('eastCentre');
alert(comp.layout)

it displays card as expected

[Condor]

It shouldn't display 'card', it should display (Object).

This means your eastCentre component isn't rendered yet.

You could use:

var comp = Ext.getCmp('eastCentre');
if (comp.rendered) {
  comp.layout.setActiveItem(1);
} else {
  comp.activeItem = 1
}

[dVyper]

Excellent I've been able to get it to work!

Tis a bit frustrating though - the 'activeItem' property is listed as a config property but not as a public property so I didn't think to try calling it directly. Same thing goes for the setActiveItem method which I only found as listed for the CardLayout class. And the checking for the rendered state is not used in the layout-browser example. I don't think I'd ever have found out how to fix this without your help...

[Condor]

activeItem isn't a property, it is indeed a config option.

Most Ext components apply the config object to themselves (making all config options temporary properties) and uses these during creation and render.
activeItem is used during render, so it is still available as a property before that. After render it isn't used anymore, so changing it then won't do anything.