ExtJS表单(Form)组件配置与操作详解
需积分: 12 75 浏览量
更新于2024-09-13
收藏 80KB PDF 举报
"本文详细介绍了ExtJS中的form组件配置参数,包括Ext.form.Action和Ext.form.BasicForm的相关选项和方法。"
在ExtJS框架中,form组件是用于构建交互式表单的核心组件,它允许用户输入数据并能进行数据验证和提交。下面我们将深入探讨其配置参数和相关类的功能。
首先,我们来看`Ext.form.Action`类,这是处理表单动作的基础。`Ext.form.Action`定义了几个关键的配置项和属性:
1. **success**:当表单动作执行成功后调用的回调函数,传入参数为`form`和`action`对象。
2. **failure**:执行失败后的回调函数,同样接收`form`和`action`作为参数。
3. **method**:设置表单提交的方式,支持`GET`和`POST`两种方式。
4. **params**:提交到服务器的额外参数。
5. **url**:表单动作的URL目标。
6. **waitMsg**:执行操作时显示的等待提示信息。
7. **Action.CLIENT_INVALID**:表示客户端验证失败。
8. **Action.CONNECT_FAILURE**:通信错误。
9. **Action.LOAD_FAILURE**:加载数据时出现问题,如返回数据缺少`data`属性。
10. **Action.SERVER_INVALID**:服务端验证失败。
11. **failureType**:错误类型标识。
12. **result**:包含了`success`属性(布尔值)和其他可能的响应属性,如`msg`。
13. **type**:动作类型,可选值有`submit`和`load`,分别对应表单提交和数据加载。
接着,我们转向`Ext.form.BasicForm`,这是`Ext.form.FormPanel`的基础,它提供了对表单的高级控制:
1. **baseParams**:默认传递到服务器的参数。
2. **method**:与`Ext.form.Action`相同,设置表单提交方式。
3. **url**:表单的默认提交路径。
4. **fileUpload**:布尔值,指示表单是否包含文件上传。
5. **timeout**:表单动作的超时时间,默认30秒。
6. **trackResetOnLoad**:表单加载时是否自动重置数据。
`Ext.form.BasicForm`还提供了一些常用方法:
1. **doAction**:执行指定的动作,接受`actionName`和`options`参数。`options`可以包含`url`、`method`、`params`、`headers`、`success`回调、`failure`回调以及`clientValidation`标志(决定是否进行客户端验证)。
2. **clearInvalid**:清除表单中所有无效的验证信息。
3. **findField**:根据字段名查找表单内的Field组件。
通过这些配置项和方法,开发者可以灵活地控制表单的行为,例如验证用户输入、处理提交或加载数据、自定义错误处理等。理解并熟练运用这些配置和方法对于创建功能丰富的动态表单至关重要。
2012-03-07 上传
2022-08-03 上传
2023-06-01 上传
2024-10-30 上传
2024-10-30 上传
2023-09-04 上传
2023-07-28 上传
2024-07-26 上传
zmbqlxb
- 粉丝: 0
- 资源: 16
最新资源
- 基于Python和Opencv的车牌识别系统实现
- 我的代码小部件库:统计、MySQL操作与树结构功能
- React初学者入门指南:快速构建并部署你的第一个应用
- Oddish:夜潜CSGO皮肤,智能爬虫技术解析
- 利用REST HaProxy实现haproxy.cfg配置的HTTP接口化
- LeetCode用例构造实践:CMake和GoogleTest的应用
- 快速搭建vulhub靶场:简化docker-compose与vulhub-master下载
- 天秤座术语表:glossariolibras项目安装与使用指南
- 从Vercel到Firebase的全栈Amazon克隆项目指南
- ANU PK大楼Studio 1的3D声效和Ambisonic技术体验
- C#实现的鼠标事件功能演示
- 掌握DP-10:LeetCode超级掉蛋与爆破气球
- C与SDL开发的游戏如何编译至WebAssembly平台
- CastorDOC开源应用程序:文档管理功能与Alfresco集成
- LeetCode用例构造与计算机科学基础:数据结构与设计模式
- 通过travis-nightly-builder实现自动化API与Rake任务构建