ExtJS手风琴布局隐藏子元素

Question

如何使用**Accordion布局覆盖计算下一个展开/折叠子面板的逻辑?我对它很感兴趣，因为它无法在不违反扩展/折叠可见面板的情况下隐藏用户聊天序列器子面板。

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

视图链接

Answer 1

好像是个bug。项目的collapsed属性设置为"top"，isCollapsingOrExpanding设置为1。如果您将collapsed属性设置为true和isCollapsingOrExpanding = undefined它再次工作:)所以在您隐藏之后，您可以尝试将这些设置为这些值，它再次工作…

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