Ext 布局Layout使用总结

布局Layout的一些概念：

区域（region ）：任何一个封闭的DOM元素，例如body，div，span等

布局管理器（layout manager ）：负责管理页面中的区域。在Ext中布局管理的主要的用户组件是BorderLayout类。在BorderLayout中划分好了一些预定的区域。可用的区域分别有south, east, west, north,和center。每一个BorderLayout对象都提供这些区域，但只有center要求必须使用的。

面板（Panel ）：是区域管理（region management）的另外一个组件。面板也相当于一个容器，它将页面元素（div等）与布局layout中的区域进行关联。

 

使用示例一：简单的布局

使用说明：

第一步：

创建BorderLayout对象layout，并指定layout的容器为document.body，在这个layout中包括四个区域，分别对应BorderLayout预置的north、south、west和center，对于每一区域都可以进行各种属性的设置，包括宽度、是否带有标题、是否可伸缩等等，代码示例如下

js 代码

var layout = new Ext.BorderLayout(document.body, {
     north: {
         split:false,
         initialSize: 35
     },
     south: {
         split:false,
         initialSize: 20
     },
     west: {
         split:false,
         initialSize: 200,
         collapsible: false
     },
     center: {
         autoScroll: true
     }
 });

 

第二步：

为layout填充内容，分别为north、south、west和center填充了相应的内容面板ContentPanel，layout.beginUpdate()和layout.endUpdate()表示在其间的添加过程中先不要对加入的对象排版布局。这样的好处是避免了ContentPanel有对象加入时，导致UI的刷新，改进了整体的用户体验。如下所示：

js 代码

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header', {fitToFrame:true}));
layout.add('south', new Ext.ContentPanel('footer', {fitToFrame:true}));
layout.add('west', new Ext.ContentPanel('nav', {fitToFrame:true}));
layout.add('center', new Ext.ContentPanel('content'));
layout.endUpdate();

 

第三步：

页面区域内容，在html页面中可以通过div进行区域内容设置，如下

html代码

<div id="header" class="x-layout-inactive-content">
    ......
</div>
<div id="nav" class="x-layout-inactive-content">
    ......
</div>
<div id="content" class="x-layout-inactive-content">
      ......
</div>
<div id="footer" class="x-layout-inactive-content">
      ......
</div>

 

效果图如下：

 

 

使用示例二：嵌套的布局

嵌套的布局可以通过在BorderLayout里面添加BorderLayout来实现，这中间需要NestedLayoutPanel来对里面的BorderLayout包装，代码示例如下：

js 代码

var layout = new Ext.BorderLayout(document.body, {
    west: {
        split:true,
        initialSize: 200,
        titlebar: true,
        collapsible: true,
        minSize: 100,
        maxSize: 400
    },
    center: {
        autoScroll: false
    }
});
layout.beginUpdate();

layout.add('west', new Ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));
var innerLayout = new Ext.BorderLayout('content', {　//嵌套的layout
    south: {
        split:true,
        initialSize: 200,
        minSize: 100,
        maxSize: 400,
        autoScroll:true,
        collapsible:true,
        titlebar: true
    },
    center: {
        autoScroll:true
    }
});
innerLayout.add('south', new Ext.ContentPanel('inner1', "More Information"));
innerLayout.add('center', new Ext.ContentPanel('inner2'));
layout.add('center', new Ext.NestedLayoutPanel(innerLayout));　//嵌套包装
layout.endUpdate();

 

Layout 布局属性说明（自己的理解翻译可能不准确）：

split:true, 边框是否可以拖动

initialSize: 200, 初始大小

titlebar: true, 是否带有标头栏

collapsible: true, 是否可以卷缩

minSize: 100, 最小大小

maxSize: 400 最大大小

 

页面效果如：