页面布局：Layout

extjs Border边框布局

更多2013/8/5  来源：extjs学习 浏览量：15403

学习标签：  extjs  Border布局  布局

要填满用fit布局

本文导读：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。 其中center 区域的面板是不能够少的。

border布局包含多个子面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是：east（东）、south（南）、west（西）、north（北）、center（中）。加入到容器中的子面板需要指定region配置下来告知容器要加入到那个部分。

 

一、下面介绍一个简单的实例：

 

 

JScript 代码   复制

 Ext.onReady(function()
{
    Ext.create('Ext.panel.Panel', 
        {
            title: '容器面板',
            renderTo: 'div1',
            width: 450,
            height: 300,
            layout: 'border',
            defaults: 
                {
                 split: true,                  //是否有分割线
                    collapsible: true,           //是否可以折叠
                    bodyStyle: 'padding:15px'  
                },  
            items: [
                    {  //子元素的方位：north、west、east、center、south   region: 'north', 
                        title: '北',
                        xtype: "panel",
                        html: "子元素1",
                        height: 70
                    },
                    {
                        region: 'west',
                        title: '西',
                        xtype: "panel",
                        html: "子元素2",
                        width: 100
                    },
                    {
                        region: 'east',
                        title: '东',
                        xtype: "panel",
                        html: "子元素2",
                        width: 100
                    },
                    {
                        region: 'center',
                        title: '主体',
                        xtype: "panel",
                        html: "子元素3"
                    },
                    {
                        region: 'south',
                        title: '南',
                        xtype: "panel",
                        html: "子元素4",
                        height: 70
                    }
                   ]
        });
});

 

 

实例效果如下:
 

 

二、使用Border布局时注意事项

1 使用Border布局的容器必须有一个子件在'中心'区域(region:'center')。中心区域的子件将会自动改变尺寸来填充Border布局中没有被使用的其他区域的空间。(如果不指定会报uncaught exception: No center region defined in BorderLayout XXX异常)

2 任何west或east区域的子件都必须定义宽度(一个整数代表该区域占用的像素)(如果不指定布局不起作用，并且还会报col is null的错)

3 任何north或south区域的子件都必须定义高度

4 Border布局的所有区域在被渲染时以及此之后就固定了，其子组件可能无法删除或添加。

5 要添加/删除Border布局内的组件，它们必须是被一个额外的由Border布局直接管理的容器所封装。如果该区域是可收起的(collapsible:true)，Border布局管理器直接使用的容器应该是一个Panel。