Question

我创建了一个列布局，并且需要其中一列在按钮单击时折叠。

我创建了这个fiddle以证明我的需要。

我预计剩余的列将占用剩余的可用空间。我错了！

有解决方法吗？

Answer 1

一种方法是您可以将边框布局嵌套在另一个边框布局中，并使用collapsible：true

Ext.application({
    name : 'NG',

    launch : function() {
        var me = this;

        me.createViewport();
    },            

    createViewport: function(){
        var me = this;

        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items:[{
                xtype: 'panel',
                region: 'north',
                weight: 10,
                html:'<H1>Header</H1>'
            },{
                xtype: 'panel',
                region:'center',
                layout:'border',
                items:[{
                    xtype:'panel',
                    region: 'center',
                    html:'<p>Column 1</p><p>Lorem ipsum dolor sit amet, amet porta ac. Justo nec mauris, et velit, tempus vitae elit elit, ac aliquam, penatibus donec in. Auctor faucibus eros vehicula tellus class sed, et in lacus tempus laoreet mollis, amet justo nascetur urna sem sem. Tellus nullam etiam eros lacus conubia, amet non. Vel nullam eget, urna ac, et at, nonummy ut amet mauris ipsum odio maecenas. Molestie aenean, diam a turpis sed dolor mauris hac. Nam in tellus sodales eros, penatibus torquent sodales iaculis mauris condimentum id, pellentesque pellentesque vestibulum aliquam, turpis rutrum tincidunt</p>'
                },{
                    xtype:'panel',
                    region:'east',
                    bodyStyle:'background-color: yellow;',
                    html:'<p>Column 2</p>',
                    width: 200,
                    collapsible:true
                }]
            },{
                xtype: 'panel',
                region: 'west',
                html:'<h2>Navigation</h2>',
                weight: 10
            }]
        });
    }
});

这将为您提供可折叠的切换控制，并且将为您处理其他区域的大小调整。

ExtJS 4.2.3列布局不支持折叠面板

1 个答案: