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?

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?

• javascript
• asp.net
• c#-4.0
• extjs

• How were you trying to call 'setActiveItem'? – NT3RP Commented Mar 21, 2011 at 20:36
• i've tried setActiveItem(1), setActiveItem('1'), and setActiveItem('card-map'). – MBU Commented Mar 21, 2011 at 20:38

3 Answers 3

You need to call

this.layout.setActiveItem();

in handler and add

scope: cardpanel

under the handler definition.

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

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');
            }
        }