ExtJS常用控件实战：Table Layout表单设计

ExtJS 是一个由 Sencha 公司开发的 JavaScript 框架，专门用于构建丰富的交互式网页应用。ExtJS 提供了多种UI控件，允许开发者通过使用预设的组件快速构建界面，而无需从头开始编码。其中，布局管理是ExtJS中一个重要的概念，它负责如何在页面中组织和显示控件。 在ExtJS中，Table Layout是一种布局管理方式，它将容器内的子组件排列成表格的形式，每个子组件占据一个单元格。这种布局方式特别适合于数据密集型的表单界面，它可以有效地管理多个字段，使表单整洁有序。 要使用ExtJS的Table Layout，首先需要引入ExtJS库文件，然后创建一个Ext JS的面板（Panel）作为容器，并设置其layout属性为'table'。接下来，通过配置columns属性，可以定义表格布局的列数。然后，向面板中添加各种控件（如字段集FieldSet，文本框TextField，下拉框ComboBox等），并指定每个控件所处的行和列。 下面将详细介绍ExtJS中常用控件的使用以及如何在Table Layout下进行组织。 1. **FormPanel**: FormPanel是专门用来创建表单的容器控件，它提供了表单验证、提交等基础功能。 2. **FieldSet**: FieldSet用于将表单中的字段进行逻辑分组，可以设置标题和描述，并且可以折叠。 3. **TextField**: 用于接收用户输入的单行文本数据。 4. **ComboBox**: ComboBox是一个下拉选择框，其中可以包含一个可搜索的列表，用户可以从列表中选择一个或者输入自己的值。 5. **NumberField**: 用于输入数值的文本框。 6. **DateField**: 用于选择日期的控件，通常配合日历控件进行操作。 7. **CheckboxGroup**: 一组可以多选的复选框，适用于多选问题。 8. **RadioGroup**: 一组单选按钮，用户只能从中选择一个选项。 在ExtJS中，所有这些控件都可以配置在FormPanel内，并利用Table Layout来实现布局。具体的实现代码可能如下： ```javascript var form = Ext.create('Ext.form.Panel', { title: '用户信息表单', layout: 'table', columns: 3, items: [{ xtype: 'fieldset', title: '个人信息', columnWidth: 1, items: [{ xtype: 'textfield', fieldLabel: '姓名', name: 'name' },{ xtype: 'datefield', fieldLabel: '生日', name: 'birthday' }] },{ xtype: 'fieldset', title: '联系方式', columnWidth: 1, items: [{ xtype: 'textfield', fieldLabel: '电话', name: 'phone' },{ xtype: 'textfield', fieldLabel: '邮箱', name: 'email' }] }] }); form.render('job9'); ``` 上述代码创建了一个ExtJS的表单面板，其中包含个人信息和联系方式两个字段集，每个字段集内有不同的字段。通过Table Layout将这些字段集和字段按列显示。 最后，ExtJS还提供了一个专门用来显示效果图的功能，通过上传和展示效果图.jpg文件，开发者可以更好地与客户或其他团队成员进行沟通，展示最终的界面效果。 通过这种方式，ExtJS能够帮助开发者快速搭建出一致的、跨浏览器的丰富Web应用界面，大大提升了开发效率和用户体验。