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上的注释。

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

1 个答案: