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

Answer 1

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