ExtJS3布局：columnLayout与fitLayout详解

"本文档主要介绍了ExtJS中的两种布局方式：columnLayout（列布局）和fitLayout（适应布局）。这两种布局方式在构建用户界面时起着关键作用，帮助开发者有效地组织和分配组件的空间。" 在ExtJS中，布局管理是构建复杂用户界面的基础，它决定了组件如何在容器中排列和展示。下面我们将详细探讨`columnLayout`和`fitLayout`。 1. columnLayout列布局 `columnLayout`是一种将容器内部的子组件按照列的方式进行排列的布局方式。在使用这种布局时，可以通过设置子组件的`columnWidth`属性来指定其占据的列宽，该值以百分比形式表示。同时，也可以通过设置`width`属性以绝对像素值定义宽度。在实际应用中，可以灵活地结合这两种方式来创建多列布局，实现自适应和固定宽度的组合效果。 下面的代码示例展示了如何使用`columnLayout`创建一个包含三列的窗口： ```javascript Ext.onReady(function(){ var window = new Ext.Window({ layout: "column", title: "HelloWorld", id: "helloWorldWindow", bodyStyle: "padding:10px;", width: 550, height: 300, x: 100, y: 100, items: [ // 子组件，占60%列宽 { columnWidth: .6, baseCls: "x-plain", frame: true, layout: "form", bodyStyle: "padding:5px;", items: [ {xtype: "textfield", fieldLabel: "UserName"}, {xtype: "textfield", fieldLabel: "Age"} ] }, // 子组件，占30%列宽 { columnWidth: .3, baseCls: "x-plain", bodyStyle: "padding:5px;", items: [{xtype: "textarea"}] }, // 子组件，占10%列宽 { columnWidth: .1, baseCls: "x-plain", bodyStyle: "padding:5px;", layout: "form", items: [ { xtype: "button", text: "Ok", handler: function(){alert("OK");} }, { xtype: "button", text: "Cancel", handler: function(){alert("Cancel");} } ] } ] }); window.render(Ext.getDom("tt")); window.show(); }); ``` 在这个例子中，窗口被分为三列，每列的宽度根据`columnWidth`属性的比例自动调整。 2. fitLayout适应布局 `fitLayout`布局方式是让子组件完全填充父容器的可用空间。在这种布局中，子组件的宽度和高度设置通常是无效的，因为它们会自动调整以完全适应父容器。如果容器中有多个子组件，`fitLayout`只会显示并调整第一个子组件的大小，而忽略其他组件。这通常用于创建单个大组件占据整个容器的情况。 以下是一个简单的`fitLayout`示例： ```javascript Ext.onReady(function(){ var win = new Ext.Window({ layout: "fit", title: "Fit Layout Example", width: 400, height: 300, items: [/* 单个子组件将会填满整个窗口 */] }); win.show(); }); ``` 在这个例子中，创建了一个新的窗口，其布局设为`fit`，意味着任何添加到窗口的子组件都将完全填充窗口的大小。 总结，`columnLayout`和`fitLayout`都是ExtJS中非常实用的布局策略。`columnLayout`适用于创建多列、自适应宽度的布局，而`fitLayout`则适合于需要一个组件完全占据容器空间的场景。理解并熟练运用这些布局方式，可以帮助开发者构建出更加灵活且响应式的用户界面。