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 代码

1. var layout = new Ext.BorderLayout(document.body, {   
2.      north: {   
3.          split:false,   
4.          initialSize: 35   
5.      },   
6.      south: {   
7.          split:false,   
8.          initialSize: 20   
9.      },   
10.      west: {   
11.          split:false,   
12.          initialSize: 200,   
13.          collapsible: false  
14.      },   
15.      center: {   
16.          autoScroll: true  
17.      }   
18.  });   

 

第二步：

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

js 代码

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

 

第三步：

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

html代码

1. <div id="header" class="x-layout-inactive-content">  
2.     ......   
3. </div>  
4. <div id="nav" class="x-layout-inactive-content">  
5.     ......    
6. </div>  
7. <div id="content" class="x-layout-inactive-content">  
8.       ......   
9. </div>  
10. <div id="footer" class="x-layout-inactive-content">  
11.       ......   
12. </div>  

 

效果图如下：

 

 

使用示例二：嵌套的布局

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

js 代码

1. var layout = new Ext.BorderLayout(document.body, {   
2.     west: {   
3.         split:true,   
4.         initialSize: 200,   
5.         titlebar: true,   
6.         collapsible: true,   
7.         minSize: 100,   
8.         maxSize: 400   
9.     },   
10.     center: {   
11.         autoScroll: false  
12.     }   
13. });   
14. layout.beginUpdate();   
15.     
16. layout.add('west', new Ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));   
17. var innerLayout = new Ext.BorderLayout('content', {　//嵌套的layout   
18.     south: {   
19.         split:true,   
20.         initialSize: 200,   
21.         minSize: 100,   
22.         maxSize: 400,   
23.         autoScroll:true,   
24.         collapsible:true,   
25.         titlebar: true  
26.     },   
27.     center: {   
28.         autoScroll:true  
29.     }   
30. });   
31. innerLayout.add('south', new Ext.ContentPanel('inner1', "More Information"));   
32. innerLayout.add('center', new Ext.ContentPanel('inner2'));   
33. layout.add('center', new Ext.NestedLayoutPanel(innerLayout));　//嵌套包装   
34. layout.endUpdate();   

 

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

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

initialSize: 200, 初始大小

titlebar: true, 是否带有标头栏

collapsible: true, 是否可以卷缩

minSize: 100, 最小大小

maxSize: 400 最大大小

 

页面效果如：