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

我正在开发一个有5个面板的应用程序。我想使用

布局：'border'

，这样我就可以利用

split:true

config。想象一下，一个表有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'

，一切都很正常，直到我将代码更新到extjs4.2。现在

这个.syncSize（）

函数在组件中不存在，我不知道哪个较新的函数会执行此操作。这是尝试使用边框布局实现的方法

---

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

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

{
    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'
    }]
}

---

另请参阅文档中的注释。

好的，但问题是现在它消失在视野之外，最后一个面板脱离屏幕高度。您知道如何强制它添加滚动条以便所有面板都可见吗？问题是，根据文档，中心面板将始终具有灵活的高度，以适应容器的高度：

任何具有北或南区域的子项都可以配置为初始高度，或Ext.layout.container.Box.flex值，或初始高度百分比字符串（仅除以100并用作flex值）。“中心”区域的弹性值为1。

您可以尝试使用

隐藏：true创建一个空的中心面板，并且只使用北面板。您可能还必须在容器上设置
autoScroll:true
。您知道最大的问题是什么吗？假设我有一个高度为200的北面板，在该面板中，将渲染高度大于200的栅格。问题是，在这种情况下，我希望网格具有autoscroll，但如果我调整面板大小，网格也将调整大小，直到其最大高度。再次尝试尽可能避免嵌套面板。栅格面板源自常规面板，因此它继承其行为。你不能在网格上设置
region:north
，而不是嵌套它吗？