EXT常用组件
2015-09-16 11:26
225 查看
引自:
http://www.360doc.com/content/11/0118/16/4335104_87399204.shtml
1、Ext.form.Action
配置项:
success:执行成功后回调的函数,包括两个参数:form和action
failure:执行失败后回调的函数,包括两个参数:form和action
method:表单的提交方式,有效值包括GET、POST
params:传递到请求中的参数
url:动作提交的路径
waitMsg:动作执行时显示的等待信息
属性:
Action.CLIENT_INVALID:客户端验证错误
Action.CONNECT_FAILURE:通信错误
Action.LOAD_FAILURE:加载数据时,没有包含data属性的字段被返回
Action.SERVER_INVALID:服务端验证错误
failureType:错误类型
result:包含布尔类型的success属性和其他属性,如{success: true, msg: 'ok'}
type:动作类型,可选值有submit和load
Ext.form.Action.Submit:返回的信息中要包含一个布尔类型的success属性和一个可选的errors属性
Ext.form.Action.Load:返回的信息中要包含一个布尔类型的success属性和一个data属性
2、Ext.form.BasicForm
配置项:
baseParams:传递到请求中的参数
method:表单的提交方式,有效值包括GET、POST
url:表单默认的提交路径
fileUpload:表单是否进行文件上传
timeout:表单动作的超时时间,默认为30秒
trackResetOnLoad:是否在表单初次创建时清楚数据
方法:
doAction( String/Object actionName, [Object options] ):执行一个预订的动作,可用选项包括:
url:动作提交的路径
method:表单的提交方式,有效值包括GET、POST
params:传递到请求中的参数
headers:
success:执行成功后回调的函数,包括两个参数:form和action
failure:执行失败后回调的函数,包括两个参数:form和action
clientValidation:是否客户端验证
clearInvalid():清除表单中所有的无效验证信息
findField( String id ):查找表单字段
getValues( [Boolean asString] ):
isDirty():表单数据是否被更改过
isValid():客户端验证是否成功
load( Object options ):执行表单读取动作
loadRecord( Record record ):从一个数据记录中读取数据到表单中
markInvalid( Array/Object errors ):成批设置表单字段为验证无效
reset():重置表单
setValues( Array/Object values ):成批设置表单字段值
submit( Object options ):执行表单提交动作
updateRecord( Record record ):持久化表单数据到记录集中
3、Ext.form.FormPanel
配置项:
items:一个元素或元素数组
buttons:一个按钮配置对象的数组,按钮将被添加到表单页脚中
buttonAlign:按钮的对齐方式,可选值有left、center、right,默认为center
labelWidth:表单标签的宽度
labelAlign:表单标签的对齐方式,可选值有left、top、right,默认为left
labelSeparator:字段标签与字段之间的分隔符,默认为':'
minButtonWidth:按钮的最小宽度,默认为75
方法:
getForm() : Ext.form.BasicForm
load( Object options )
startMonitoring()
stopMonitoring()
4、Ext.form.Field
配置项:
name:字段名
value:字段的初始化值
disabled:字段是否不可用,默认为false
fieldLabel:字段标签说明
hideLabel:隐藏字段标签,默认为false
labelSeparator:字段标签与字段之间的分隔符,默认为':'
labelStyle:字段标签样式
inputType:默认为text
invalidClass:默认为x-form-invalid
invalidText:字段非法文本提示
msgTarget:错误信息显示的位置,默认为qtip
qtip:显示一个浮动的提示信息
title:显示一个浏览器的浮动提示信息
under:在字段下方显示一个提示信息
side:在字段右边显示一个提示信息
readOnly:字段是否只读,默认为false
validateOnBlur:字段在失去焦点时被验证,默认为true
方法:
clearInvalid():
getRawValue()
setRawValue( Mixed value )
getValue()
setValue( Mixed value )
isDirty():字段值在装载后是否被修改过
isValid( Boolean preventMark ):当前字段值是否合法
markInvalid( [String msg] )
validate()
reset()
html:
text:
allowBlank:是否允许为空,默认为true
blankText:空验证失败后显示的提示信息
emptyText:在一个空字段中默认显示的信息
grow:字段是否自动伸展和收缩,默认为false
growMin:收缩的最小宽度
growMax:伸展的最大宽度
inputType:字段类型:默认为text
maskRe:用于过滤不匹配字符输入的正则表达式
maxLength:字段允许输入的最大长度
maxLengthText:最大长度验证失败后显示的提示信息
minLength:字段允许输入的最小长度
4000
minLengthText:最小长度验证失败后显示的提示信息
regex:正则表达式
regexText:正则表达式验证失败后显示的提示信息
vtype:验证类型的名字
alpha:限制只能输入字母
alphanum:限制只能输入字母和数字
email
url
vtypeText:验证失败时的提示信息
validator:自定义验证函数
selectOnFocus:当字段得到焦点时自动选择已存在的文本,默认为false
4、Ext.form.TextArea
配置项:
preventScrollbars:是否禁止出现滚动条,默认为false
5、Ext.form.NumberField
配置项:
allowDecimals:是否允许输入小数,默认为true
allowNegative:是否允许输入负数,默认为true
baseChars:输入的有效数字集合,默认为'0123456789'
decimalPrecision:数字的精度,默认保留小数点后2位
decimalSeparator:十进制分隔符,默认为'.'
maxValue:允许输入的最大数值
maxText:超过最大值之后的提示信息
minValue:允许输入的最小数值
minText:超过最小值之后的提示信息
nanText:输入非有效数值之后的提示信息
6、Ext.form.Checkbox
配置项:
boxLabel:复选框的文字描述
checked:复选框是否被选择,默认为false
handler:当checked值改变时触发的函数,函数包含两个参数:checkbox、checked
inputValue:
方法:
getValue():返回复选框的checked状态
setValue( Boolean/String checked ):
7、Ext.form.CheckboxGroup
配置项:
allowBlank:是否允许不选择,默认为true
blankText:
columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数)
items:对象数组
vertical:是否垂直方向显示对象,默认为false
8、Ext.form.Radio
方法:
getGroupValue():
setValue( value {String/Boolean} ):
9、Ext.form.RadioGroup
配置项:
allowBlank:
blankText:
10、Ext.form.ComboBox
配置项:
displayField:被显示在下拉框中的字段名
editable:是否可编辑,默认为true
forceSelection:输入值是否严格为待选列表中存在的值。如果输入不存在的值,会自动选择第一个最接近的值。
hiddenName:隐藏字段的名字,如果提供该参数则一个隐藏字段将被创建,用来存储所选值,当表单提交时在服务器端可以通过该名字取得列表中的所选值
listWidth:下拉列表的宽度
minListWidth:下拉列表的最小宽度,默认为70像素
loadingText:当下拉框加载数据时显示的提示信息,只有当mode='remote'时才会生效
maxHeight:下拉列表框的最大高度,默认为300像素
minChars:下拉列表框自动选择前用户需要输入的最小字符数量。mode='remote'默认为4,mode='local'默认为0
mode:下拉列表框的数据读取模式。remote读取远程数据,local读取本地数据
pageSize:下拉列表框的分页大小。该项设置只在mode='remote'时生效
queryParam:查询的名字,默认为'query',将被传递到查询字符串中
allQuery:一个发往服务器用来查询全部信息的查询字符串,默认为空字符串''
selectOnFocus:当获得焦点时立刻选择一个已存在的列表项。默认为false,此项只有在editable=true时才会生效
store:列表框绑定的数据源
transform:将页面中已存在的元素转换为组合框
lazyInit:延时初始化下拉列表,默认为true
lazyRender:延时渲染,默认为false
triggerAction:设置单击触发按钮时执行的默认操作,有效值包括all和query,默认为query,如果设置为all则会执行allQuery中设置的查询
typeAhead:设置在输入过程中是否自动选择匹配的剩余部分文本(选择第一个满足条件的),默认为false
value:初始化组合框中的值
valueField:组合框的值字段
valueNotFoundText:值不存在时的提示信息
tpl:Ext模板字符串或模板对象,可以通过该配置项自定义下拉列表的显示方式
方法:
clearValue():清空字段当前值
doQuery( String query, Boolean forceAll ):
getValue():
getStore():
setValue( String value ):
11、Ext.form.DateField
配置项:
maxValue:允许选择的最大日期
maxText:当日期大于最大值时的错误提示信息
minValue:允许选择的最小时间
minText:当日期小于最小值时的错误提示信息
format:日期显示格式,默认为“m/d/y”,一般使用“Y-m-d”
Y:四位年份
m:带前缀0的月份
d:带前缀0的日期
y:两位年份
n:不带前缀0的月份
j:不带前缀0的日期
w:星期的数字,0表示星期日,1代表星期一
showToday:是否显示今天按钮,默认为true
altFormats:多个日期输入格式组成的字符串,不同的格式之间使用“|”进行分割,默认值为'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'
disabledDates:禁止选择的日期组成的数组
disabledDatesText:选择禁选日期时显示的提示信息
disabledDays:禁止选择的星期组成的数组,0代表星期日,1代表星期一
disabledDaysText:选择禁选星期时显示的提示信息
invalidText:当日期值非法时显示的提示信息
方法:
getValue():取得日期值
12、Ext.form.FieldSet
配置项:
animCollapse:动画折叠,默认为false
checkboxToggle:设置是否显示字段集的checkbox选择框,默认为false
checkboxName:指定字段集中用于展开或隐藏字段集面板的checkbox的名字,该属性只有在checkboxToggle为true时生效
labelWidth:字段标签的宽度,可以级联到子容器
layout:布局,默认为form
13、Ext.form.TimeField
配置项:
maxValue:列表中允许的最大时间
maxText:当时间大于最大值时的错误提示信息
minValue:列表中允许的最小时间
minText:当时间小于最小值时的错误提示信息
increment:两个相邻选项间的时间间隔,默认为15分钟
format:显示格式,默认为“g:i A”。一般使用“H:i:s”
H:带前缀0的24小时
i:带前缀0的分钟
s:带前缀0的秒
invalidText:当时间值非法时显示的提示信息
altFormats:多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割
本范例展示如何使用表单的各种组件。
下拉框组件展示了5种使用范例:普通下拉框、绑定HTML组件的下拉框、树形下拉框、分页下拉框、多选下拉框等。
Js代码
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "qtip";
//component
var hiddenField = new Ext.form.Hidden({
name: "hiddenField",
value: "1"
});
var usernameField = new Ext.form.TextField({
name: "username",
fieldLabel: "用户名",
allowBlank: true,
blankText: "请输入用户名!"
});
var pwdField = new Ext.form.TextField({
name: "password",
fieldLabel: "密码",
allowBlank: true,
blankText: "请输入密码!",
inputType: "password"
});
var ageField = new Ext.form.NumberField({
name: "age",
allowBlank: true,
blankText: "请输入年龄!",
fieldLabel: "年龄",
allowDecimals: false,
allowNegative: false,
minValue: 18,
minText: "年龄不能少于18",
maxValue: 100,
maxText: "年龄不能大于100"
});
var love1 = new Ext.form.Checkbox({
name: "love1",
boxLabel: "打球",
inputValue: "1"
});
var love2 = new Ext.form.Checkbox({
name: "love2",
boxLabel: "游泳",
inputValue: "2"
});
var love3 = new Ext.form.Checkbox({
name: "love3",
boxLabel: "登山",
inputValue: "3"
});
var loveGroup = new Ext.form.CheckboxGroup({
name: "love",
columns: [80, 80, 1.0],
fieldLabel: "爱好",
items: [love1, love2, love3]
});
var sex1 = new Ext.form.Radio({
name: "sex1",
boxLabel: "男",
inputValue: "1"
});
var sex2 = new Ext.form.Radio({
name: "sex1",
boxLabel: "女",
inputValue: "0"
});
var sexGroup = new Ext.form.RadioGroup({
name: "sex",
columns: [80, 1.0],
fieldLabel: "性别",
items: [sex1, sex2]
});
//本地数据源的组合框
var store = new Ext.data.SimpleStore({
fields: ["code", "name"],
data: [
["1", "北京"],
["5", "上海"],
["4", "广东"]
]
});
var cmbProvince = new Ext.form.ComboBox({
id: "cmbProvince",
hiddenName: "province.id",
fieldLabel: "省份",
resizable: true,
editable: false,
width: 100,
emptyText: "请选择...",
store: store,
valueField: "code",
displayField: "name",
triggerAction: "all",
mode: "local"
});
//远程数据源的组合框
var store2 = new Ext.data.SimpleStore({
fields: ["name"],
proxy: new Ext.data.HttpProxy({
url: "../testForm!loadData.action"
})
});
var cmbManager = new Ext.form.ComboBox({
hiddenName: "manager",
fieldLabel: "经理",
editable: false,
triggerAction: "all",
mode: "local",
maxHeight: 200,
store: new Ext.data.SimpleStore({fields:[],data:[[]]}),
onSelect: Ext.emptyFn,
tpl: "<tpl for='.'><div id='tree'></div></tpl>"
});
var root = new Ext.tree.TreeNode({
nodeId: 1,
text: "根节点",
expanded: true
});
root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true}));
root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true}));
var tree = new Ext.tree.TreePanel({
root: root,
border: false,
autoHeight: true,
autoScroll: true
});
tree.on("click", function(node){
if(!node.isLeaf()) return; //只能选择叶节点
//下拉框的隐藏值
if(cmbManager.hiddenField){
cmbManager.hiddenField.value = node.attributes.nodeId;
}
cmbManager.setRawValue(node.text); //下拉框的显示值
cmbManager.collapse(); //折叠下拉框
});
cmbManager.on("expand", function(){
tree.render("tree");
});
//分页远程数据源的组合框
var store3 = new Ext.data.JsonStore({
url: "../testForm!loadData3.action",
totalProperty: "totalNum",
root: "books",
fields: ["id", "name"]
});
var cmbBook = new Ext.form.ComboBox({
hiddenName: "books",
fieldLabel: "书籍",
store: store3,
valueField: "name",
displayField: "name",
triggerAction: "all",
mode: "remote",
queryParam: "books",
loadingText: "正在装载数据...",
width: 180,
minChars: 1,
editable: false,
listWidth: 250,
pageSize: 3
});
//HTML标准组件
var cmbPass = new Ext.form.ComboBox({
hiddenName: "status",
fieldLabel: "是否有效",
triggerAction: "all",
editable: false,
width: 100,
transform: "isPass",
lazyRender: true
});
var cmbTimes = new Ext.form.TimeField({
hiddenName: "time",
fieldLabel: "时间",
minValue: "09:00",
minText: "所选时间应大于{0}",
maxValue: "18:00",
maxText: "所选时间应小于{0}",
format: "H时i分",
increment: 30,
invalidText: "时间格式无效!",
maxHeight: 200,
width: 100,
value: "09时00分",
editable: false
});
var cmbMonths = new Ext.ux.MultiSelectCombo({
hiddenName: "months",
fieldLabel: "月份",
maxHeight: 200,
editable: false,
store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]],
mode: "local",
width: 180,
maxItemsCount: 3,
maxItemsCountText: "最多只能选择三个选项!"
});
var cmbBirths = new Ext.form.DateField({
name: "births",
fieldLabel: "出生日期",
disabledDays: [0,6],
disabledDaysText: "禁止选择周末!",
width: 100,
readOnly: true,
format: "Y-m-d",
invalidText: "不是有效的日期值!"
});
var fieldSet1 = new Ext.form.FieldSet({
title: "下拉框",
checkboxName: "fieldSet1",
checkboxToggle: true,
autoHeight: true,
layout: "table",
layoutConfig: {
columns: 3
},
defaults: {
style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",
layout:"form",
labelAlign: "right"
},
items: [
{rowspan:1, colspan:1, items:[cmbProvince]},
{rowspan:1, colspan:1, items:[cmbManager]},
{rowspan:1, colspan:1, items:[cmbBook]},
{rowspan:1, colspan:1, items:[cmbPass]},
{rowspan:1, colspan:1, items:[cmbTimes]},
{rowspan:1, colspan:1, items:[cmbMonths]},
{rowspan:1, colspan:1, items:[cmbBirths]}]
});
var remarksField = new Ext.form.TextArea({
name: "remarks",
fieldLabel: "备注",
width: 400,
height: 80
});
var form = new Ext.form.FormPanel({
id: "frmAddUser",
title: "新增用户",
autoWidth: true,
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
labelWidth: 70,
tbar: toolbar,
items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup,
fieldSet1, remarksField],
url: "../testForm!ajaxSubmitForm.action"
});
});
http://www.360doc.com/content/11/0118/16/4335104_87399204.shtml
1、Ext.form.Action
配置项:
success:执行成功后回调的函数,包括两个参数:form和action
failure:执行失败后回调的函数,包括两个参数:form和action
method:表单的提交方式,有效值包括GET、POST
params:传递到请求中的参数
url:动作提交的路径
waitMsg:动作执行时显示的等待信息
属性:
Action.CLIENT_INVALID:客户端验证错误
Action.CONNECT_FAILURE:通信错误
Action.LOAD_FAILURE:加载数据时,没有包含data属性的字段被返回
Action.SERVER_INVALID:服务端验证错误
failureType:错误类型
result:包含布尔类型的success属性和其他属性,如{success: true, msg: 'ok'}
type:动作类型,可选值有submit和load
Ext.form.Action.Submit:返回的信息中要包含一个布尔类型的success属性和一个可选的errors属性
Ext.form.Action.Load:返回的信息中要包含一个布尔类型的success属性和一个data属性
2、Ext.form.BasicForm
配置项:
baseParams:传递到请求中的参数
method:表单的提交方式,有效值包括GET、POST
url:表单默认的提交路径
fileUpload:表单是否进行文件上传
timeout:表单动作的超时时间,默认为30秒
trackResetOnLoad:是否在表单初次创建时清楚数据
方法:
doAction( String/Object actionName, [Object options] ):执行一个预订的动作,可用选项包括:
url:动作提交的路径
method:表单的提交方式,有效值包括GET、POST
params:传递到请求中的参数
headers:
success:执行成功后回调的函数,包括两个参数:form和action
failure:执行失败后回调的函数,包括两个参数:form和action
clientValidation:是否客户端验证
clearInvalid():清除表单中所有的无效验证信息
findField( String id ):查找表单字段
getValues( [Boolean asString] ):
isDirty():表单数据是否被更改过
isValid():客户端验证是否成功
load( Object options ):执行表单读取动作
loadRecord( Record record ):从一个数据记录中读取数据到表单中
markInvalid( Array/Object errors ):成批设置表单字段为验证无效
reset():重置表单
setValues( Array/Object values ):成批设置表单字段值
submit( Object options ):执行表单提交动作
updateRecord( Record record ):持久化表单数据到记录集中
3、Ext.form.FormPanel
配置项:
items:一个元素或元素数组
buttons:一个按钮配置对象的数组,按钮将被添加到表单页脚中
buttonAlign:按钮的对齐方式,可选值有left、center、right,默认为center
labelWidth:表单标签的宽度
labelAlign:表单标签的对齐方式,可选值有left、top、right,默认为left
labelSeparator:字段标签与字段之间的分隔符,默认为':'
minButtonWidth:按钮的最小宽度,默认为75
方法:
getForm() : Ext.form.BasicForm
load( Object options )
startMonitoring()
stopMonitoring()
4、Ext.form.Field
配置项:
name:字段名
value:字段的初始化值
disabled:字段是否不可用,默认为false
fieldLabel:字段标签说明
hideLabel:隐藏字段标签,默认为false
labelSeparator:字段标签与字段之间的分隔符,默认为':'
labelStyle:字段标签样式
inputType:默认为text
invalidClass:默认为x-form-invalid
invalidText:字段非法文本提示
msgTarget:错误信息显示的位置,默认为qtip
qtip:显示一个浮动的提示信息
title:显示一个浏览器的浮动提示信息
under:在字段下方显示一个提示信息
side:在字段右边显示一个提示信息
readOnly:字段是否只读,默认为false
validateOnBlur:字段在失去焦点时被验证,默认为true
方法:
clearInvalid():
getRawValue()
setRawValue( Mixed value )
getValue()
setValue( Mixed value )
isDirty():字段值在装载后是否被修改过
isValid( Boolean preventMark ):当前字段值是否合法
markInvalid( [String msg] )
validate()
reset()
1、Ext.form.Hidden
2、Ext.form.Label
配置项:html:
text:
3、Ext.form.TextField
配置项:allowBlank:是否允许为空,默认为true
blankText:空验证失败后显示的提示信息
emptyText:在一个空字段中默认显示的信息
grow:字段是否自动伸展和收缩,默认为false
growMin:收缩的最小宽度
growMax:伸展的最大宽度
inputType:字段类型:默认为text
maskRe:用于过滤不匹配字符输入的正则表达式
maxLength:字段允许输入的最大长度
maxLengthText:最大长度验证失败后显示的提示信息
minLength:字段允许输入的最小长度
4000
minLengthText:最小长度验证失败后显示的提示信息
regex:正则表达式
regexText:正则表达式验证失败后显示的提示信息
vtype:验证类型的名字
alpha:限制只能输入字母
alphanum:限制只能输入字母和数字
url
vtypeText:验证失败时的提示信息
validator:自定义验证函数
selectOnFocus:当字段得到焦点时自动选择已存在的文本,默认为false
4、Ext.form.TextArea
配置项:
preventScrollbars:是否禁止出现滚动条,默认为false
5、Ext.form.NumberField
配置项:
allowDecimals:是否允许输入小数,默认为true
allowNegative:是否允许输入负数,默认为true
baseChars:输入的有效数字集合,默认为'0123456789'
decimalPrecision:数字的精度,默认保留小数点后2位
decimalSeparator:十进制分隔符,默认为'.'
maxValue:允许输入的最大数值
maxText:超过最大值之后的提示信息
minValue:允许输入的最小数值
minText:超过最小值之后的提示信息
nanText:输入非有效数值之后的提示信息
6、Ext.form.Checkbox
配置项:
boxLabel:复选框的文字描述
checked:复选框是否被选择,默认为false
handler:当checked值改变时触发的函数,函数包含两个参数:checkbox、checked
inputValue:
方法:
getValue():返回复选框的checked状态
setValue( Boolean/String checked ):
7、Ext.form.CheckboxGroup
配置项:
allowBlank:是否允许不选择,默认为true
blankText:
columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数)
items:对象数组
vertical:是否垂直方向显示对象,默认为false
8、Ext.form.Radio
方法:
getGroupValue():
setValue( value {String/Boolean} ):
9、Ext.form.RadioGroup
配置项:
allowBlank:
blankText:
10、Ext.form.ComboBox
配置项:
displayField:被显示在下拉框中的字段名
editable:是否可编辑,默认为true
forceSelection:输入值是否严格为待选列表中存在的值。如果输入不存在的值,会自动选择第一个最接近的值。
hiddenName:隐藏字段的名字,如果提供该参数则一个隐藏字段将被创建,用来存储所选值,当表单提交时在服务器端可以通过该名字取得列表中的所选值
listWidth:下拉列表的宽度
minListWidth:下拉列表的最小宽度,默认为70像素
loadingText:当下拉框加载数据时显示的提示信息,只有当mode='remote'时才会生效
maxHeight:下拉列表框的最大高度,默认为300像素
minChars:下拉列表框自动选择前用户需要输入的最小字符数量。mode='remote'默认为4,mode='local'默认为0
mode:下拉列表框的数据读取模式。remote读取远程数据,local读取本地数据
pageSize:下拉列表框的分页大小。该项设置只在mode='remote'时生效
queryParam:查询的名字,默认为'query',将被传递到查询字符串中
allQuery:一个发往服务器用来查询全部信息的查询字符串,默认为空字符串''
selectOnFocus:当获得焦点时立刻选择一个已存在的列表项。默认为false,此项只有在editable=true时才会生效
store:列表框绑定的数据源
transform:将页面中已存在的元素转换为组合框
lazyInit:延时初始化下拉列表,默认为true
lazyRender:延时渲染,默认为false
triggerAction:设置单击触发按钮时执行的默认操作,有效值包括all和query,默认为query,如果设置为all则会执行allQuery中设置的查询
typeAhead:设置在输入过程中是否自动选择匹配的剩余部分文本(选择第一个满足条件的),默认为false
value:初始化组合框中的值
valueField:组合框的值字段
valueNotFoundText:值不存在时的提示信息
tpl:Ext模板字符串或模板对象,可以通过该配置项自定义下拉列表的显示方式
方法:
clearValue():清空字段当前值
doQuery( String query, Boolean forceAll ):
getValue():
getStore():
setValue( String value ):
11、Ext.form.DateField
配置项:
maxValue:允许选择的最大日期
maxText:当日期大于最大值时的错误提示信息
minValue:允许选择的最小时间
minText:当日期小于最小值时的错误提示信息
format:日期显示格式,默认为“m/d/y”,一般使用“Y-m-d”
Y:四位年份
m:带前缀0的月份
d:带前缀0的日期
y:两位年份
n:不带前缀0的月份
j:不带前缀0的日期
w:星期的数字,0表示星期日,1代表星期一
showToday:是否显示今天按钮,默认为true
altFormats:多个日期输入格式组成的字符串,不同的格式之间使用“|”进行分割,默认值为'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'
disabledDates:禁止选择的日期组成的数组
disabledDatesText:选择禁选日期时显示的提示信息
disabledDays:禁止选择的星期组成的数组,0代表星期日,1代表星期一
disabledDaysText:选择禁选星期时显示的提示信息
invalidText:当日期值非法时显示的提示信息
方法:
getValue():取得日期值
12、Ext.form.FieldSet
配置项:
animCollapse:动画折叠,默认为false
checkboxToggle:设置是否显示字段集的checkbox选择框,默认为false
checkboxName:指定字段集中用于展开或隐藏字段集面板的checkbox的名字,该属性只有在checkboxToggle为true时生效
labelWidth:字段标签的宽度,可以级联到子容器
layout:布局,默认为form
13、Ext.form.TimeField
配置项:
maxValue:列表中允许的最大时间
maxText:当时间大于最大值时的错误提示信息
minValue:列表中允许的最小时间
minText:当时间小于最小值时的错误提示信息
increment:两个相邻选项间的时间间隔,默认为15分钟
format:显示格式,默认为“g:i A”。一般使用“H:i:s”
H:带前缀0的24小时
i:带前缀0的分钟
s:带前缀0的秒
invalidText:当时间值非法时显示的提示信息
altFormats:多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割
本范例展示如何使用表单的各种组件。
下拉框组件展示了5种使用范例:普通下拉框、绑定HTML组件的下拉框、树形下拉框、分页下拉框、多选下拉框等。
Js代码
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "qtip";
//component
var hiddenField = new Ext.form.Hidden({
name: "hiddenField",
value: "1"
});
var usernameField = new Ext.form.TextField({
name: "username",
fieldLabel: "用户名",
allowBlank: true,
blankText: "请输入用户名!"
});
var pwdField = new Ext.form.TextField({
name: "password",
fieldLabel: "密码",
allowBlank: true,
blankText: "请输入密码!",
inputType: "password"
});
var ageField = new Ext.form.NumberField({
name: "age",
allowBlank: true,
blankText: "请输入年龄!",
fieldLabel: "年龄",
allowDecimals: false,
allowNegative: false,
minValue: 18,
minText: "年龄不能少于18",
maxValue: 100,
maxText: "年龄不能大于100"
});
var love1 = new Ext.form.Checkbox({
name: "love1",
boxLabel: "打球",
inputValue: "1"
});
var love2 = new Ext.form.Checkbox({
name: "love2",
boxLabel: "游泳",
inputValue: "2"
});
var love3 = new Ext.form.Checkbox({
name: "love3",
boxLabel: "登山",
inputValue: "3"
});
var loveGroup = new Ext.form.CheckboxGroup({
name: "love",
columns: [80, 80, 1.0],
fieldLabel: "爱好",
items: [love1, love2, love3]
});
var sex1 = new Ext.form.Radio({
name: "sex1",
boxLabel: "男",
inputValue: "1"
});
var sex2 = new Ext.form.Radio({
name: "sex1",
boxLabel: "女",
inputValue: "0"
});
var sexGroup = new Ext.form.RadioGroup({
name: "sex",
columns: [80, 1.0],
fieldLabel: "性别",
items: [sex1, sex2]
});
//本地数据源的组合框
var store = new Ext.data.SimpleStore({
fields: ["code", "name"],
data: [
["1", "北京"],
["5", "上海"],
["4", "广东"]
]
});
var cmbProvince = new Ext.form.ComboBox({
id: "cmbProvince",
hiddenName: "province.id",
fieldLabel: "省份",
resizable: true,
editable: false,
width: 100,
emptyText: "请选择...",
store: store,
valueField: "code",
displayField: "name",
triggerAction: "all",
mode: "local"
});
//远程数据源的组合框
var store2 = new Ext.data.SimpleStore({
fields: ["name"],
proxy: new Ext.data.HttpProxy({
url: "../testForm!loadData.action"
})
});
var cmbManager = new Ext.form.ComboBox({
hiddenName: "manager",
fieldLabel: "经理",
editable: false,
triggerAction: "all",
mode: "local",
maxHeight: 200,
store: new Ext.data.SimpleStore({fields:[],data:[[]]}),
onSelect: Ext.emptyFn,
tpl: "<tpl for='.'><div id='tree'></div></tpl>"
});
var root = new Ext.tree.TreeNode({
nodeId: 1,
text: "根节点",
expanded: true
});
root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true}));
root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true}));
var tree = new Ext.tree.TreePanel({
root: root,
border: false,
autoHeight: true,
autoScroll: true
});
tree.on("click", function(node){
if(!node.isLeaf()) return; //只能选择叶节点
//下拉框的隐藏值
if(cmbManager.hiddenField){
cmbManager.hiddenField.value = node.attributes.nodeId;
}
cmbManager.setRawValue(node.text); //下拉框的显示值
cmbManager.collapse(); //折叠下拉框
});
cmbManager.on("expand", function(){
tree.render("tree");
});
//分页远程数据源的组合框
var store3 = new Ext.data.JsonStore({
url: "../testForm!loadData3.action",
totalProperty: "totalNum",
root: "books",
fields: ["id", "name"]
});
var cmbBook = new Ext.form.ComboBox({
hiddenName: "books",
fieldLabel: "书籍",
store: store3,
valueField: "name",
displayField: "name",
triggerAction: "all",
mode: "remote",
queryParam: "books",
loadingText: "正在装载数据...",
width: 180,
minChars: 1,
editable: false,
listWidth: 250,
pageSize: 3
});
//HTML标准组件
var cmbPass = new Ext.form.ComboBox({
hiddenName: "status",
fieldLabel: "是否有效",
triggerAction: "all",
editable: false,
width: 100,
transform: "isPass",
lazyRender: true
});
var cmbTimes = new Ext.form.TimeField({
hiddenName: "time",
fieldLabel: "时间",
minValue: "09:00",
minText: "所选时间应大于{0}",
maxValue: "18:00",
maxText: "所选时间应小于{0}",
format: "H时i分",
increment: 30,
invalidText: "时间格式无效!",
maxHeight: 200,
width: 100,
value: "09时00分",
editable: false
});
var cmbMonths = new Ext.ux.MultiSelectCombo({
hiddenName: "months",
fieldLabel: "月份",
maxHeight: 200,
editable: false,
store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]],
mode: "local",
width: 180,
maxItemsCount: 3,
maxItemsCountText: "最多只能选择三个选项!"
});
var cmbBirths = new Ext.form.DateField({
name: "births",
fieldLabel: "出生日期",
disabledDays: [0,6],
disabledDaysText: "禁止选择周末!",
width: 100,
readOnly: true,
format: "Y-m-d",
invalidText: "不是有效的日期值!"
});
var fieldSet1 = new Ext.form.FieldSet({
title: "下拉框",
checkboxName: "fieldSet1",
checkboxToggle: true,
autoHeight: true,
layout: "table",
layoutConfig: {
columns: 3
},
defaults: {
style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",
layout:"form",
labelAlign: "right"
},
items: [
{rowspan:1, colspan:1, items:[cmbProvince]},
{rowspan:1, colspan:1, items:[cmbManager]},
{rowspan:1, colspan:1, items:[cmbBook]},
{rowspan:1, colspan:1, items:[cmbPass]},
{rowspan:1, colspan:1, items:[cmbTimes]},
{rowspan:1, colspan:1, items:[cmbMonths]},
{rowspan:1, colspan:1, items:[cmbBirths]}]
});
var remarksField = new Ext.form.TextArea({
name: "remarks",
fieldLabel: "备注",
width: 400,
height: 80
});
var form = new Ext.form.FormPanel({
id: "frmAddUser",
title: "新增用户",
autoWidth: true,
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
labelWidth: 70,
tbar: toolbar,
items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup,
fieldSet1, remarksField],
url: "../testForm!ajaxSubmitForm.action"
});
});
相关文章推荐
- python2 与 python3 语法区别
- 关于activity继承的抽象类Context(基类)
- android程序的加固解析
- PC 拖动 以百分比计算
- ubuntu ufw
- 面试题_HashTable和HashMap的区别
- make -C M=
- 怎么在ubuntu系统下烧入镜像到讯为Exynos 44开发板
- Linux环境下Python的安装过程
- unity3d从streamingassets拷贝到persistentassets
- ConcurrentHashMap的putIfAbsent方法
- 开始学习Python
- CSS3 transform的skew属性值图文详解
- 码虫。
- logback 常用配置详解(一)
- spring aop术语
- 游戏世界观设计
- MDIO/MDC(SMI)接口
- redis+mc review
- linux jdk 6 版本下载