extjs-form组件配置参数详解

### extjs-form组件配置参数详解 #### 一、Ext.form.Action `Ext.form.Action`是ExtJS中的一个类，用于处理表单提交和加载数据的动作。它提供了多种配置选项和属性来控制表单操作的过程。 **配置项** - **success**: 执行成功后的回调函数，该函数接收两个参数：`form`（当前表单）和`action`（当前动作对象）。 - **failure**: 执行失败后的回调函数，同样接收`form`和`action`作为参数。 - **method**: 表单提交的方式，支持`GET`和`POST`两种方式。 - **params**: 传递到请求中的额外参数，可以是键值对的形式。 - **url**: 动作提交的目标URL。 - **waitMsg**: 动作执行时显示的等待信息，用于提升用户体验。 **属性** - **Action.CLIENT_INVALID**: 客户端验证错误常量。 - **Action.CONNECT_FAILURE**: 连接失败错误常量。 - **Action.LOAD_FAILURE**: 加载数据失败，通常是因为服务器返回的数据格式不正确或缺少必要字段。 - **Action.SERVER_INVALID**: 服务器端验证错误。 - **failureType**: 错误类型。 - **result**: 包含一个布尔类型的`success`属性和其他相关信息的对象，例如`{success:true, msg:'ok'}`。 - **type**: 动作类型，可以是`submit`（提交）或`load`（加载）。 **注意事项** - 当动作类型为`submit`时，服务器返回的信息中应包含一个布尔类型的`success`属性和一个可选的`errors`属性。 - 当动作类型为`load`时，服务器返回的信息中应包含一个布尔类型的`success`属性和一个`data`属性。 #### 二、Ext.form.BasicForm `Ext.form.BasicForm`类提供了一个基础表单的功能，支持表单数据的提交、加载以及简单的数据绑定。 **配置项** - **baseParams**: 默认传递到请求中的参数。 - **method**: 提交方式，支持`GET`和`POST`。 - **url**: 默认的提交路径。 - **fileUpload**: 是否启用文件上传功能。 - **timeout**: 动作的超时时间，默认为30秒。 - **trackResetOnLoad**: 是否在加载时清除表单数据。 **方法** - **doAction(String/Object actionName, [Object options])**: 执行预定义的动作。选项包括： - `url`: 动作的提交路径。 - `method`: 提交方式。 - `params`: 额外参数。 - `headers`: HTTP头部信息。 - `success`: 成功后的回调函数。 - `failure`: 失败后的回调函数。 - `clientValidation`: 是否启用客户端验证。 - **clearInvalid()**: 清除所有无效验证信息。 - **findField(String id)**: 根据ID查找表单字段。 - **getValues([Boolean asString])**: 获取表单的值，如果`asString`为`true`则返回字符串形式的值。 - **isDirty()**: 检查表单数据是否被修改过。 - **isValid()**: 执行客户端验证并返回验证结果。 - **load(Object options)**: 执行表单数据加载操作。 - **loadRecord(Record record)**: 从数据记录中加载数据到表单。 - **markInvalid(Array/Object errors)**: 标记字段为无效状态，并给出错误信息。 - **reset()**: 重置表单。 - **setValues(Array/Object values)**: 设置表单字段的值。 - **submit(Object options)**: 提交表单。 - **updateRecord(Record record)**: 更新数据记录中的值。 #### 三、Ext.form.FormPanel `Ext.form.FormPanel`是一个用于展示表单的面板组件，提供了布局和样式设置，以及更高级的交互功能。 **配置项** - **items**: 添加到表单面板的子组件。 - **buttons**: 添加到表单底部的按钮配置数组。 - **buttonAlign**: 按钮的对齐方式，默认为`center`。 - **labelWidth**: 表单标签的宽度。 - **labelAlign**: 表单标签的对齐方式，默认为`left`。 - **labelSeparator**: 字段标签与字段之间的分隔符，默认为`:`。 - **minButtonWidth**: 按钮的最小宽度，默认为75像素。 **方法** - **getForm()**: 返回当前表单实例(`Ext.form.BasicForm`)。 - **load(Object options)**: 加载表单数据。 - **startMonitoring()**: 开始监控表单数据变化。 - **stopMonitoring()**: 停止监控表单数据变化。 #### 四、Ext.form.Field `Ext.form.Field`是所有表单字段的基础类，提供了字段的基本属性和方法。 **配置项** - **name**: 字段名。 - **value**: 字段的初始值。 - **disabled**: 是否禁用字段，默认为`false`。 - **fieldLabel**: 字段标签的描述文字。 - **hideLabel**: 是否隐藏字段标签，默认为`false`。 - **labelSeparator**: 字段标签与字段之间的分隔符，默认为`:`。 - **labelStyle**: 字段标签的CSS样式。 - **inputType**: 输入框的类型，默认为`text`。 - **invalidClass**: 字段无效时的CSS类，默认为`x-form-invalid`。 - **invalidText**: 字段无效时的提示文本。 - **msgTarget**: 错误信息的显示位置，默认为`qtip`。 - **qtip**: 显示一个浮动提示信息。 - **title**: 显示一个浏览器工具提示信息。 - **under**: 在字段下方显示错误信息。 通过以上详细介绍，我们可以看到ExtJS为Web开发人员提供了丰富的表单处理功能，不仅涵盖了基本的表单操作，还提供了高级的数据验证和用户交互机制。开发者可以根据自己的需求灵活配置这些选项，构建出高效且用户友好的Web应用界面。