Ext布局BorderLayout.docVIP

布局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,