CODEWITHSUNDEEP
javascriptasp.netc#-4.0extjs
MBU
MBU

Reputation: 5098

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',
    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?

Upvotes: 3

Views: 19202

Answers (3)

Robby Pond
Robby Pond

Reputation: 73494

You need to call 

this.layout.setActiveItem();

in handler and add

scope: cardpanel

under the handler definition.

Upvotes: 8

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

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

Upvotes: 1

Jason Harwig
Jason Harwig

Reputation: 45581

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

Upvotes: 8

Related Questions