ExtJS panels enable on expand

Question

I have 5 panels created in ExtJS 4.0. Initially 1st one is enabled and expanded and second one is enabled but collapsed, what I want to do is to enable the other one's as the user expands the previous panel. Let's say panel 3 is disabled, and whenever user expands panel 2, panel 3 enables (but stays collapsed) and when panel 3 is expanded, panel 4 becomes enabled and so on.

Have you tried initializing the next panel in the callback? If the ID is panel_1, you could know to then initialize panel_2, etc? — dzm

Sean Adkinson Sean Adkinson · Accepted Answer · 2011-10-28T17:25:18

Seems like you should just be able to attach event listeners on expand to do what you want. You might bubble the event in order to make a single listener.

Something like:

Ext.create('Ext.panel.Panel', {
    defaults: {
        bubbleEvents: ['expand']
    }, 
    items: [
        item1,
        item2,
        item3
    ],
    listeners: {
        scope: this,
        exand: function(panel) {
            var nextPanel = findTheNextPanel(panel);
            nextPanel.enable();
        }
    }
}

ExtJS panels enable on expand

1 Answers