Question

I have a panel using the card layout as follows:

var cardpanel = new Ext.Panel(
{
    id: 'cardPanel',
    //title: 'Card Layout',
    region: 'center',
    layout: 'card',
    activeItem: 0,
    autoDestroy: false,
    bodyStyle: 'border-top:0px',
    defaults: {
        border: false
    },
    items: [mediaGrid, mappanel],
    tbar: [
        {
            id: 'card-media',
            text: 'Media',
            icon: '/img/silk/images.png',
            width: 50,
            handler: function () {
                //switch to media
            }
        },
        {
            id: 'card-map',
            text: 'Map',
            icon: '/img/silk/map.png',
            width: 50,
            handler: function () {
                //switch to map
            }
        }
    ]
});

The commented parts are where i would like to implement the switch between the 2 panels in the card layout but im not sure how to do that. I’ve tried using setActiveItem but I was always either getting the setActiveItem is not a function or it it just didnt say anything. How do i get it to switch panels?

Answer 1

You need to call

this.layout.setActiveItem();

in handler and add

scope: cardpanel

under the handler definition.