ExtJS Form配置.docx
- 文档编号:8691904
- 上传时间:2023-02-01
- 格式:DOCX
- 页数:14
- 大小:24.12KB
ExtJS Form配置.docx
《ExtJS Form配置.docx》由会员分享,可在线阅读,更多相关《ExtJS Form配置.docx(14页珍藏版)》请在冰豆网上搜索。
ExtJSForm配置
ExtJSForm相关配置文档
1.Ext_Ext.form.Field基类
/*其他表单字段都从Ext.form.Field类中扩展
Ext.form.Field主要配置项表:
name String 字段名(数据提交后台的名称)
id String 控件唯一表示(系统会自动生成)
value String 字段初始化值
readOnly Boolean 是否只读
validateOnBlur Boolean 字段失去焦点时是否被验证(默认true)
validationDelay Number 验证延时(默认250毫秒)
disabled Boolean 字段是否不可用‘
fieldLabel String 字段对应标签说明(默认'')
hideLabel Boolean 是否隐藏字段标签(默认false)
hideMode String 值:
visibility,offsets,display
hideParent Boolean true显示隐藏组件同时显示隐藏其容器(默认false)
labelSeparator String 字段标签于字段间分隔符(默认':
')
msgTarget String 设置错误信息显示位置:
qtip:
显示浮动提示信息
title:
显示一浏览器浮动提示信息
under:
在字段下方显示一提示信息
side:
在字段右边显示一提示信息
*/
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';
Ext.QuickTips.init(); //初始化信息提示功能
var config = {
title:
'信息提示(qtip)', //表单标题
height:
100, //表单高度
width:
300, //表单宽度
frame:
true, //是否渲染表单
labelSeparator:
':
', //分隔符
labelWidth:
60, //标签宽
labelAlign:
'right', //标签对齐方式
renderTo:
'form', //表单定位
//表单子元素数组
items:
[
//单行文本框
new Ext.form.TextField({
fieldLabel:
'姓名', //标签内容
allowBlank:
false, //是否允许空
blankText:
'请输入姓名', //为空之后的错误信息提示
msgTarget:
'qtip' //显示浮动信息提示框
//msgTarget:
'title'
//msgTarget:
'under' //注意表单高度!
//msgTarget:
'side' //注意表单宽度!
}),
//数字框
new Ext.form.NumberField({
fieldLabel:
'年龄',
allowBlank:
false,
blankText:
'请输入年龄',
msgTarget:
'qtip'
})
]
}
var form = new Ext.form.FormPanel(config);
2.Ext_表单面板_Ext.form.FormPanel
/*Ext.form.BasicForm基本表单组件,提供对表单动作的支持并负责初始化已有字段组件
默认采用Ajax方式进行异步数据提交,
如要用原始方法提交表单可覆盖表单的onSubmit及Submit方法
var myForm = new Ext.form.BasicForm("form-el-id",{
onSubmit:
Ext.emptyFn, //覆盖onSubmit方法为空函数
submit:
function() //覆盖submit方法
{
this.getEl().dom.submit(); //调用底层表单元素的submit方法进行表单提交
}
});
Ext.form.BasicForm主要配置表
baseParams Object 传递到请求中的参数,如{id;'123',foo:
'bar'}
errorReader DataReader 表单提交时用来读取错误信息的数据读取器
fileUpload Boolean 设置表单是否进行文件上传
method String 设置表单提交方式GET或POST
reader DataReader 设置表单执行load读取数据时的数据读取器
timeout Number 设置表单动作的超时时间
trackResetOnLoad Boolean 设置true表单在初次创建将清除最近一次加载的数据或用setValues()设置数据
url String 设置表单执行请求时默认提交路径
waitMsgTarget Mixed 默认情况下,表单执行中显示的是以Ext.MessageBox.wait组件,可指定其他目标元素
Ext.form.BasicForm常用方法(继承到FormPanel中,可直接使用)
clearInvalid():
BasicForm 清除表单中所有无效验证信息
doAction(String/Object actionName, 执行一个预定动作(Ext.form.Action.Submit或Ext.form.Action.Load)或自定义扩
[Object options]):
BasicForm Ext.form.Action动作,执行一个特殊请求处理
findField(String id):
Field 通过id,dataIndex,name,hiddenName查找表单字段
isDirty():
Boolean 如表单在第一次读取后被更改过返回true
isValid():
Boolean 如果客户端验证成功返回true
load(Object options):
BasicForm 执行表单读取动作,配置对象options被传递到action中
loadRecord(Record record):
BasicForm 从一个数据记录中读取数据到表单中
markInvalid(Array/Object errors):
BasicForm 成批设置表单字段为验证无效,参数可为数组[{id;'2',msg:
'me'},...],JSON对象
reset():
BasicForm 重置表单
setValues(Array/Object values):
BasicForm 成批设置表单字段值[{id:
'name',value:
'tom'},...]
submit(Object options):
BasicForm 执行表单提交动作,配置对象options被传递到action中
updateRecord(Record record):
BasicForm 持久化表单数据到记录集中
Ext.form.FormPanel支持的主要表单组件
Ext.form.Checkbox 复选框
Ext.form.ComboBox 下拉列表框
Ext.form.DateField 日期选择框
Ext.form.Hidden 隐藏域
Ext.form.HtmlEditor HTML文本编辑器
Ext.form.NumberField 数字输入框
Ext.form.Radio 单选框
Ext.form.TextArea 多行文本框
Ext.form.TextField 单行文本框
Ext.form.TimeField 时间选择框
Ext.form.TriggerField 触发按钮文本框
Ext.form.FormPanel主要配置项目表
buttons Array 按钮对象配置数组
buttonAlign String 设置buttons中按钮对齐方式:
left,center(默认),right
footer Boolean 是否创建表单页脚
header Boolean 是否创建表单标题栏,如设置title自动创建
headerAsText Boolean 标题栏中是否显示title默认true
items Mixed 一子元素或子元素数组
labelAlign String 表单标签对齐方式:
left(默认),top,right
labelWidth Number 表单标签宽度
title String 表单标题
Ext.form.FormPanel常用方法表
getForm():
Ext.form.BasicForm 获取表单面板基本表单对象
load(Object options):
void 加载表单内容,为Ext.form.BasicForm.load代理
starMonitoring():
void 开始监控表单有效状态
stopMonitoring():
void 停止监控表单有效状态
*/
3.Ext_基本表单_Ext.form.BasicForm
/*Ext.form.BasicForm基本表单组件,提供对表单动作的支持并负责初始化已有字段组件
默认采用Ajax方式进行异步数据提交,
如要用原始方法提交表单可覆盖表单的onSubmit及Submit方法
var myForm = new Ext.form.BasicForm("form-el-id",{
onSubmit:
Ext.emptyFn, //覆盖onSubmit方法为空函数
submit:
function() //覆盖submit方法
{
this.getEl().dom.submit(); //调用底层表单元素的submit方法进行表单提交
}
});
Ext.form.BasicForm主要配置表
baseParams Object 传递到请求中的参数,如{id;'123',foo:
'bar'}
errorReader DataReader 表单提交时用来读取错误信息的数据读取器
fileUpload Boolean 设置表单是否进行文件上传
method String 设置表单提交方式GET或POST
reader DataReader 设置表单执行load读取数据时的数据读取器
timeout Number 设置表单动作的超时时间
trackResetOnLoad Boolean 设置true表单在初次创建将清除最近一次加载的数据或用setValues()设置数据
url String 设置表单执行请求时默认提交路径
waitMsgTarget Mixed 默认情况下,表单执行中显示的是以Ext.MessageBox.wait组件,可指定其他目标元素
Ext.form.BasicForm常用方法(继承到FormPanel中,可直接使用)
clearInvalid():
BasicForm 清除表单中所有无效验证信息
doAction(String/Object actionName, 执行一个预定动作(Ext.form.Action.Submit或Ext.form.Action.Load)或自定义扩
[Object options]):
BasicForm Ext.form.Action动作,执行一个特殊请求处理
findField(String id):
Field 通过id,dataIndex,name,hiddenName查找表单字段
isDirty():
Boolean 如表单在第一次读取后被更改过返回true
isValid():
Boolean 如果客户端验证成功返回true
load(Object options):
BasicForm 执行表单读取动作,配置对象options被传递到action中
loadRecord(Record record):
BasicForm 从一个数据记录中读取数据到表单中
markInvalid(Array/Object errors):
BasicForm 成批设置表单字段为验证无效,参数可为数组[{id;'2',msg:
'me'},...],JSON对象
reset():
BasicForm 重置表单
setValues(Array/Object values):
BasicForm 成批设置表单字段值[{id:
'name',value:
'tom'},...]
submit(Object options):
BasicForm 执行表单提交动作,配置对象options被传递到action中
updateRecord(Record record):
BasicForm 持久化表单数据到记录集中
Ext.form.FormPanel支持的主要表单组件
Ext.form.Checkbox 复选框
Ext.form.ComboBox 下拉列表框
Ext.form.DateField 日期选择框
Ext.form.Hidden 隐藏域
Ext.form.HtmlEditor HTML文本编辑器
Ext.form.NumberField 数字输入框
Ext.form.Radio 单选框
Ext.form.TextArea 多行文本框
Ext.form.TextField 单行文本框
Ext.form.TimeField 时间选择框
Ext.form.TriggerField 触发按钮文本框
Ext.form.FormPanel主要配置项目表
buttons Array 按钮对象配置数组
buttonAlign String 设置buttons中按钮对齐方式:
left,center(默认),right
footer Boolean 是否创建表单页脚
header Boolean 是否创建表单标题栏,如设置title自动创建
headerAsText Boolean 标题栏中是否显示title默认true
items Mixed 一子元素或子元素数组
labelAlign String 表单标签对齐方式:
left(默认),top,right
labelWidth Number 表单标签宽度
title String 表单标题
Ext.form.FormPanel常用方法表
getForm():
Ext.form.BasicForm 获取表单面板基本表单对象
load(Object options):
void 加载表单内容,为Ext.form.BasicForm.load代理
starMonitoring():
void 开始监控表单有效状态
stopMonitoring():
void 停止监控表单有效状态
*/
4.Ext_基本文本输入框_Ext.form.TextField
/*Ext.form.TextField主要配置表:
allowBlank Boolean 是否允许为空(默认true)
blankText String 为空验证失败提示信息
emptyText String 空字段中默认显示信息
grow Boolean 设置字段是否根据内容伸缩(默认false)
growMax Number 字段伸展的最大宽度(默认800)
growMin Number 字段收缩最小宽度(默认30)
inputType String 字段类型(默认text)
maxLength Number 字段允许输入最大长度
masLengthText String 最大长度验证失败提示信息
minLength Number 字段允许输入最小长度
minLenghtText String 最小长度验证失败提示信息
regex String javascript正则表达式
regexText String 正则表达式验证失败提示信息
selectOnFocus Boolean 设置当前字段得到焦点是否自动选择已存在文本(默认false)
vtype String 验证类型名字
vty
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ExtJS Form配置 Form 配置