ExtJS表单布局实战：FormLayout 案例解析

"表单布局实例，讲解了ExtJS中的Form表单布局，包括一个综合实例，涉及到了column布局、fieldset布局、以及控件的锚定和自动高度设置等概念。" 在ExtJS中，表单布局是构建用户界面的重要部分，它允许开发者组织和展示表单元素以获取或提交数据。在提供的描述和部分内容中，我们看到一个具体的`border`布局实例，结合了一个`FormPanel`和多个组件，展示了如何通过ExtJS创建复杂的表单结构。 1. **FormPanel布局**：`FormPanel`是ExtJS中用于创建表单的容器，它提供了对表单行为和布局的控制。在示例中，`FormPanel`被配置为`column`布局，允许其内容按列划分。 2. **Column布局**：`layout:"column"`使得表单内的元素可以按照预设的宽度分成多列显示。在这个例子中，表单被划分为两列，每列的宽度为50%。 3. **FieldSet**：`fieldset`是一个可选的组件，用于将相关的一组字段分组，并可提供标题。在示例中，`fieldset`用于组织公司资料的相关输入字段。 4. **Anchor布局**：`anchor`属性用于根据父容器的大小动态调整组件的大小。`anchor:"-20"`表示控件会占据除20像素外的全部宽度，这使得表单元素能根据窗口大小变化自适应。 5. **Auto Height**：`autoHeight:true`设置使得包含的字段集可以自动调整高度以适应内容，无需预先设定高度。 6. **TextField**：`textfield`是用于输入文本的基本表单字段。在示例中，有多个`textfield`分别用于输入编号和姓名。 7. **Layout嵌套**：表单内还嵌套了更细粒度的布局，如`column`布局，用于在字段集中进一步划分空间。 8. **Border和Body Style**：在组件配置中，`border:false`用于移除边框，而`bodyStyle:"padding:4px"`则设置了内部的填充，提供了更好的视觉效果。 这个实例展示了如何利用ExtJS的布局系统创建一个具有多列、分组和自适应大小的表单，这对于构建复杂且响应式的Web应用非常有用。初学者可以通过这个实例学习到如何灵活地组织和定制表单布局。