ExtJS Accordion布局隐藏子元素

时间:2014-07-18 08:18:45

标签: javascript extjs accordion

如何使用** Accordion layou ** t覆盖计算下一个展开/折叠子面板的逻辑? 我感兴趣的是由于无法隐藏用户聊天音序器子面板而不违反可见面板的展开/折叠。

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

1 个答案:

答案 0 :(得分:0)

这似乎是一个错误。该项目的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);