Change Active Item In A Card Layout. Extjs

I have a panel using the card layout as follows: var cardpanel = new Ext.Panel( { id: 'cardPanel', //title: 'Card Layout', region: 'center', layout: 'card', act

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