ExtJS表单控件详解：TextField与ComboBox

"ExtJS是一种强大的JavaScript库，用于构建富客户端Web应用程序，尤其是那些具有复杂用户界面的应用。本文主要探讨了ExtJS中的表单元素，包括TextField、隐藏框、密码框以及ComboBox下拉列表框的创建和配置。" 在ExtJS中，表单是收集用户输入数据的关键组件。下面将详细介绍这些表单元素及其配置选项。 1. **TextField文本输入框** TextField是用于用户输入文本的基本组件。在示例中，它被配置为一个用户名输入框，具有以下特性： - `fieldLabel`: 'username'，定义了字段的标签。 - `emptyText`: '请输入用户名'，为空时显示的提示文本。 - `allowBlank`: false，不允许用户留空。 - `maxLength`: 8，限制输入的最大字符数。 - `minLength`: 3，要求输入的最小字符数。 - `name`: 'userName'，字段的名称，用于识别和提交数据。 - `msgTarget`: 'under'，指定错误消息显示的位置，放在输入框下方。 2. **TextField隐藏框** 隐藏框用于存储数据而不显示给用户。在示例中，它设置为隐藏： - `hidden`: true，使字段不可见。 - `hideLabel`: true，隐藏字段标签。 - `name`: 'newsId'，字段的名称。 3. **TextField密码框** 密码框用于安全地输入密码。配置与文本输入框类似，但添加了`inputType`属性： - `inputType`: 'password'，将输入类型设置为密码，显示为星号或圆点。 4. **ComboBox下拉列表框** ComboBox提供了一个可下拉选择的列表。在示例中，有两个ComboBox的例子： - 第一个ComboBox配置如下： - `fieldLabel`: '培训意向'，定义字段标签。 - `transform`: 'wantCourse'，与页面上的select元素关联。 - `width`: 500，设置控件宽度。 - `triggerAction`: 'all'，点击触发器时显示完整列表。 - `readOnly`: true，设置为只读。 - `lazyRender`: true，延迟渲染，提高性能。 - `name`: 'wantCourse'，字段的名称。 - 页面上的HTML部分应包含一个与`transform`属性匹配的select元素，例如： ```html <select id="wantCourse" style="display:none;"> <option value="true">Java</option> <option value="CCNA">CCNA</option> <option value="...">...</option> </select> ``` 这些option值将作为ComboBox的选项显示。 通过上述配置，开发者可以创建功能丰富的表单，实现复杂的用户交互。在实际应用中，还可以结合其他ExtJS组件如DateField、TextArea等，以及各种验证规则和事件处理，进一步增强表单的功能和用户体验。