ExtJS Accordion layout hide child elements

Question

How to override the logic for calculating the next expand/collapse child panel using **Accordion layou**t? I am interested in it due to the inability to hide from the user chat sequencer child panels without violating expand/collapse of visible panels.

MenuBoxPanel = Ext.create('Ext.panel.Panel', {
    width: 300, 
    layout: {
        type:'accordion',
        multi: false
    },
    region: 'west', 
    items: [{
        xtype: 'panel',
        title: 'Panel 1'
    }, {
        xtype: 'panel',
        title: 'Panel 2'
    }, {
        xtype: 'panel',
        title: 'Panel 3'
    }, {
        xtype: 'panel',
        title: 'Panel 4'
    }]
});
var viewport = Ext.create('Ext.container.Viewport', {
    layout: 'border',
    minHeight: 420,
    items: [MenuBoxPanel],
    renderTo: Ext.getBody()
});
MenuBoxPanel.items.items[1].hide();

View link

It's not really clear what you try to achieve...Can you describe the scenario in steps? :) You have an accordion where first item is expanded. You hide the second item... What do you expect to happen? — VDP
I need the ability to hide from the user accordion elements without removing them from the panel, while switching to the child elements should ignore hidden elements. The screenshot shows that this is not happening and after switching elements - hidden elements are not ignored. I am sorry for my English) — user3852096

VDP VDP · Accepted Answer · 2014-07-18T14:01:05

It seems like it's a bug. The item's collapsed property is set to 'top' and the isCollapsingOrExpanding is set to 1. If you set the collapsed property to true and the isCollapsingOrExpanding = undefined it works again :) So after you hide you can try setting those to these values and it works again..

http://jsfiddle.net/Vandeplas/5KBfJ/1/

var menuBoxPanel = Ext.create('Ext.panel.Panel', {
    width: 300, 
    layout: {
        type:'accordion',
        multi: false
    },
    region: 'west', 
    items: [{
        xtype: 'panel',
        title: 'Panel 1'
    }, {
        xtype: 'panel',
        title: 'Panel 2'
    }, {
        xtype: 'panel',
        title: 'Panel 3'
    }, {
        xtype: 'panel',
        title: 'Panel 4'
    }]
});
var viewport = Ext.create('Ext.container.Viewport', {
    layout: 'border',
    minHeight: 420,
    items: [menuBoxPanel],
    renderTo: Ext.getBody()
});
setTimeout(function(){
    var item = menuBoxPanel.items.getAt(1).hide();
    item.collapsed = true;
    item.isCollapsingOrExpanding = undefined;
}, 2000);

ExtJS Accordion layout hide child elements

1 Answers