如何实现 extjs 嵌套边框布局？

Question

我正在开发一个具有 5 个面板的应用程序。我想使用layout:'border' 以便我可以利用split:true 配置。想象一个有 5 行的表格，每行都可以调整大小并代表一个面板。

例子：

frame: false,
width: 700,
border: false,
height: 600,
stateful: false,
layout: 'fit',
items: 
{
    layout: 'border',
    items:
    [
        {
            region: 'north',
            split: true,
            minWidth: 350,
            border: false,
            frame: false,
            layout: 'fit',
            title:'NNNNN',           
            margins: '0 0 0 0',
            items: []
        },
        {
            region: 'center',
            split: true,
            minWidth: 350,
            border: false,
            frame: false,
            layout: 'fit',
            title:'AAAAA',           
            margins: '0 0 0 0',
            items: 
            {
                layout: 'border',
                items:
                [
                    {
                        region: 'north',
                        .......
                    },
                    {
                        region: 'center',
                        .......
                    },
                    {
                        region: 'south',
                        ..........
                    }
                ]
            }
        },
        {
            region: 'south',
            split: true,
            minWidth: 350,
            border: false,
            frame: false,
            layout: 'fit',
            title:'CCCCCCCC',           
            margins: '0 0 0 0',
            items: []             
        }
    ]
} 

我也在考虑使用Resizer，但这里还有另一个问题。这是我在 ExtJs 3.4 中使用的类，它正在工作：

Ext.define('myapp.ResizablePanel', 
{
    extend         : 'Ext.panel.Panel',
    alias          : 'widget.reszpanel',

    handles        : 's',

    resizePanel: function()
    {
        this.syncSize();       
        this.updateLayout();
        if (this.layout) 
            this.doLayout(true, true);
    },

    onRender:function() 
    {
        this.callParent(arguments);

        this.resizer = new Ext.Resizable
        ({
            el: this.getEl(),
            handles: this.handles,
            minHeight: 120,
            maxHeight: 20000
        }).on("resize", this.resizePanel.bind(this));
    }
});

这很有帮助，而不是 xtype: 'panel'，我使用的是 xtype: 'reszpanel'，并且在我将代码更新到 ExtJS 4.2 之前一切正常。现在 this.syncSize() 函数在组件中不存在，我不知道哪个较新的函数可以做到这一点。这是尝试使用边框布局实现的方式。

问题是，当我只有一个北、东、西、南和中心时，一切都很好。但是当我尝试嵌套布局时，代码会中断。有什么帮助吗？谢谢

Answer 1

您可以拥有多个区域为“北”的面板，您只需要确保只有一个中心面板。嵌套面板不利于性能，因此您应该尽可能避免这种情况。

{
    xtype: 'container',
    layout: 'border',
    items: [{
        xtype: 'panel',
        region: 'north',
        title: 'North 1',
        split: true
    },{
        xtype: 'panel',
        region: 'north',
        title: 'North 2',
        split: true
    },{
        xtype: 'panel',
        region: 'north',
        title: 'North 3',
        split: true
    },{
        xtype: 'panel',
        region: 'center',
        title: 'Center'
    }]
}

另请参阅文档中border layout 上的注释。