change active item in a card layout. ExtJS

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?

Solution 1

You need to call

this.layout.setActiveItem();

in handler and add

scope: cardpanel

under the handler definition.

Solution 2

You can only use this if you are in a handler for cardpanel.

cardpanel.layout.setActiveItem(0); // to switch to mediaGrid
cardpanel.layout.setActiveItem(1); // to switch to mappanel

Solution 3

You get the "setActiveItem is not a function" because the object with which you are calling the method do not have the function. In short you are using the wrong object to call the setActiveItem method. You need to modify your code as:

{
            id: 'card-media',
            text: 'Media',
            icon: '/img/silk/images.png',
            width: 50,
            scope: this,
            handler: function () {
                this.layout.setActiveItem('card-map');
            }
        },
        {
            id: 'card-map',
            text: 'Map',
            icon: '/img/silk/map.png',
            width: 50,
            scope: this,
            handler: function () {
                this.layout.setActiveItem('card-media');
            }
        }