EXTjs布局和容器.docVIP

布局和容器 extjs4.0布局和容器（Layouts and Containers）是Ext JS中最强大的部分之一。它负责控制你应用程序中每个组件的尺寸和定位。本文内容包括了如何运用布局的基础。 容器 一个Ext JS应用程序的图形用户界面(UI)是由许多组件构成的。容器是一种可以容纳一些其他组件的特殊类型组件。 典型的Ext JS应用程序是由一些嵌套的组件构成不同的层来组成的。最通用的容器就是Panel。让我们看下如何创建一个容器以允许一个Panel包含其他的组件： Ext.create(Ext.panel.Panel, { renderTo: Ext.getBody(), width: 400, height: 300, title: Container Panel, items: [ {xtype: panel,title: CP1,height: 100,width: 75%}, {xtype: panel,title: CP2,height: 100,width: 75%} ] }); 我们创建了一个Panel，并把它渲染到DOM的body中，然后我们使用items配置项添加两个子Panel。 布局 每个容器都拥有一个布局来管理它子组件的尺寸和定位。下面我们将讨论如何使用指定类型的布局来配置容器，以及布局系统是如何使每个组件都保持协调的。 使用布局 上面例子中我们没有为Panel容器指定布局。可以看到子Panel是一个接着一个被放置的，正如DOM中标准的块元素一样。这是因为所有容器的默认布局为自动布局(Auto Layout)。自动布局并不为子元素指定任何特殊的定位和尺寸规则。 例如，我们假定想让两个子Panel并排放置，并且每个占据父容器宽度的50%，我们可以简单地使用一个列布局(Column Layout)，通过在父容器中配置layout选项来实现。 Ext.create(Ext.panel.Panel, { … layout: column, … }); Ext JS拥有一整套可用的布局，几乎容纳了你能想象到的任何一种布局。可以查看布局的例子(Layout Examples)以了解那些布局是可行的。 布局系统是如何工作的呢？ 父容器的布局负责其所有子元素的初始定位和尺寸大小。框架内部调用了容器的doLayout方法，该方法触发布局为父容器的所有子元素计算得到正确的尺寸和定位并更新DOM。doLayout方法是递归调用的，所以父容器的任何子元素同样也将会调用它们的doLayout方法。这种调用将持续到到达组件层次的末端。通常你一般不会在你的应用程序代码中调用doLayout方法，因为框架已为你调用了。 父容器的改变尺寸时，或当添加或删除子组件的items时，重新布局将被触发。通常，我们仅依赖框架为我们管理以更新布局，但是有时我们想阻止框架自动更新布局，这样我们一次可以批量地处理多个操作，完成时，我们手动地触发布局。 为此，我们在容器中使用延缓布局(suspendLayout)标志以阻止它自动布局，当我们执行那些通常会触发布局的操作时（例如添加或移除items）。当我们做完这些操作时，我们必须把延缓布局标志关闭，并且手动地调用容器的doLayout方法以触发布局： var containerPanel = Ext.create(Ext.panel.Panel, { renderTo: Ext.getBody(), width: 400, height: 200, title: Container Panel, layout: column, suspendLayout: true //打开挂起标志，挂起自动布局 }); //我们开始添加子组件，当然也可以用数组方式批量添加 containerPanel.add( {xtype: panel,title: CP1,height: 100,width: 50%} ); containerPanel.add( { xtype: panel,title: CP2,height: 100,width: 50%} ); //关闭挂起标志，停止挂起 containerPanel.suspendLayout = false; //手动触发重新布局. containerPanel.doLayout(); 组件布局 如容器的布局定义了一个容器如何设定尺寸和定位它的组件items，组件的布局同样也定义了组件如何布局它内部的子items的尺寸和定位。 组件的布局通过使用组件布局(componentLayout)来设置配置选项。