1

我正在开发一个有 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()组件中不存在函数，我不知道哪个较新的函数可以做到这一点。这是尝试使用边框布局实现的方式。

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

4

1 回答 1

3

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

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

另请参阅文档中有关边框布局的说明。

于 2013-10-31T16:16:11.163 回答