CODEWITHSUNDEEP
extjsextjs4
anesh
anesh

Reputation: 61

How to change the panel inside card layout on button click - extjs 4

I have this requirement to change the active item inside a panel (card layout) on button click. The button is present in another different panel. I tried the below but its not working . The panel does not get changed when I click the button.

Ext.getCmp('PanelID').layout.setActiveItem('requiredcardID'); -- I am using this code inside the button handler.

Is setActiveItem incorrect method or am I using it in wrong context?

Upvotes: 0

Views: 2182

Answers (1)

pherris
pherris

Reputation: 17743

This looks like the right syntax - possibly check your IDs to make sure you are getting a reference to the component? This fiddle is using 5, but I tested on 4 as well:

https://fiddle.sencha.com/fiddle/ba6/

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var panel = Ext.create('Ext.Panel',{
            renderTo:Ext.getBody(),
            title:'myPanel',
            items: [
                Ext.create('Ext.panel.Panel', {
                    layout: 'card',
                    id: 'PanelID',
                    activeItem: 0,
                    items: [Ext.create('Ext.panel.Panel', {
                        itemId: 'card-1',
                        html: 'hello'
                        }), 
                        Ext.create('Ext.panel.Panel', {
                            itemId: 'card-2',
                            html: 'hello2'
                        })]
                }),
                Ext.create('Ext.Button', {
                    text: 'change item in layout',
                    handler: function() {
                        Ext.getCmp('PanelID').layout.setActiveItem('card-2');               
                    }
                })
            ]
        });
    }
});

Upvotes: 1

Related Questions