Extjs Fieldset双行双列布局实现

"本文将介绍如何在ExtJS中创建一个FieldSet，并实现两行两列的布局。FieldSet是ExtJS中的一个组件，通常用于组织表单中的字段，提供了一个可扩展的容器来封装和展示相关的一组输入控件。我们将通过具体的代码示例来详细解析这种布局的实现方法。" 在ExtJS中，FieldSet是一个非常有用的组件，它允许我们以一种有组织的方式显示表单元素。要创建一个FieldSet，首先我们需要实例化一个`Ext.form.FieldSet`对象，设置其属性如`title`（标题）、`height`（高度）以及`layout`（布局方式）。在本例中，FieldSet的高度被设定为80像素，并且启用了边框（`border: true`）。 布局管理是ExtJS中非常关键的部分，这里使用了`form`布局，使得每个子组件按照指定的宽度自动排列。`layout:'form'`确保每个子项占据一整行，并根据需要调整大小。同时，我们注意到内部的布局使用了`column`布局，这样可以实现子元素的两列排列。 在FieldSet的`items`属性中，我们定义了两个包含两个子项的数组。每个子项是一个包含一个或多个表单控件的对象，这些控件的布局也由`columnWidth`属性控制，例如`.33`表示占据总宽度的33%，`.22`则表示占据22%。 在这个例子中，第一列包含一个ComboBox（下拉列表框），它使用了一个SimpleStore来存储数据，其中包括两个键值对：`name`和`code`。ComboBox的其他属性如`displayField`、`valueField`、`mode`、`forceSelection`等都是用来配置下拉列表的行为和外观的。第二列则包含一个DateField，用于选择日期，其`format`属性设定了日期的显示格式。 接着，第二个`layout:'column'`的子项与第一个类似，但包含不同的控件。这再次展示了FieldSet内嵌套布局的灵活性，可以自由组合各种表单组件，以满足不同的设计需求。 总结起来，这个示例展示了如何使用ExtJS的FieldSet和布局管理来创建一个具有两行两列结构的表单区域，每个区域包含了不同的输入控件。通过这种方式，我们可以构建出复杂而有序的用户界面，同时保持代码的整洁和可维护性。理解并熟练掌握这类布局技巧对于开发高质量的ExtJS应用至关重要。