Extjs 4 / Sencha

Question

I am a junior Sencha/Extjs user and I am trying to do something I am sure its simple but still can't figure out how.

as you can see here :

I have 2 panels, one called 'panel 1' and the other is hidden and called 'panel 2' also i have 2 toolbars, one with button called 'go to panel 2', when i press it i should get this :

a 'panel 1' should be hidden and ' panel 2' appears with the second toolbar which is have another button called 'go to panel 1'

I hope i made this clear enough. I could do the stuff above but i think i use a stupid way, i use an event binding with function onButtonClick on button 1:

Ext.getCmp('p2').show();
Ext.getCmp('tb2').show();
Ext.getCmp('p1').hide();
Ext.getCmp('tb1').hide();

and vice versa on button 2 :

Ext.getCmp('p1').show();
Ext.getCmp('tb1').show();
Ext.getCmp('p2').hide();
Ext.getCmp('tb2').hide();

Now, I am sure there is a better way to accomplish that using controllers but i need someone who explain me how to do it in details, because as i said, i have no experience.

Thank you.

EDIT

i need to accomplish this also :

Button 1 --> panel 1

Item 1 --> panel 2

Item 2 --> panel 3

stoe stoe · Accepted Answer · 2012-07-14T07:49:31

if the view looked like

Ext.define('MyApp.view.parentpanel', {
    extend: 'Ext.panel.Panel',

    height: 250,
    width: 400,
    activeItem: 0,
    layout: {
        type: 'card'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    html: 'i\'m panel 1',
                    bodyPadding: 10,
                    title: 'panel 1'
                },
                {
                    xtype: 'panel',
                    html: 'i\'m panel 2',
                    bodyPadding: 10,
                    title: 'panel 2'
                }
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            xtype: 'button',
                            text: 'go to panel 2'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }
});

the controller would be something like

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    views: [
        'parentpanel'
    ],

    onButtonClick: function(button, e, options) {
        var me = this,
            parentPanel = button.up('panel'),
            layout = parentPanel.getLayout(),
            activeItem = layout.getActiveItem(),
            title = activeItem.title,
            index = (title === 'panel 1' ? 1 : 0);

        layout.setActiveItem(index);
        button.setText('go to ' + title);
    },

    init: function() {
        this.control({
            "button": {
                click: this.onButtonClick
            }
        });

    }

});

Extjs 4 / Sencha

2 Answers