您的位置:首页 > Web前端 > extjs > 正文

extjs Border边框布局

更多 时间:2013-8-5 类别:Web前端 浏览量:18387

extjs Border边框布局

extjs Border边框布局

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

 

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

 

  •  
  • JScript 代码   复制
  • 
     Ext.onReady(function()
    {
        Ext.create('Ext.panel.Panel', 
            {
                title: '容器面板',
                renderTo: 'li1',
                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。