10第十讲ExtJS组件之FormPanel下.docx
《10第十讲ExtJS组件之FormPanel下.docx》由会员分享，可在线阅读，更多相关《10第十讲ExtJS组件之FormPanel下.docx（15页珍藏版）》请在冰豆网上搜索。
10第十讲ExtJS组件之FormPanel下
TimeField时间选择框
示例一：
简单应用。
Ext.onReady（
function（）{
Ext.BLANK_IMAGE_URL="../Ext/resources/images/default/s.gif";
varformPanle=newExt.FormPanel（{
renderTo:
"TestTimeField",
title:
"formPanel",
width:
300,
height:
300,
labelSeparator:
"：
",
labelAlign:
"right",
frame:
true,
items:
[
newExt.form.TimeField（{
id:
"time",
fieldLabel:
"时间"
}）
]
}）;
}
）;
format属性：
用来设置时间格式。
示例二：
12小时格式，24小时格式。
Ext.onReady（
function（）{
Ext.BLANK_IMAGE_URL="../Ext/resources/images/default/s.gif";
Ext.QuickTips.init（）;
varformPanle=newExt.FormPanel（{
renderTo:
"TestTimeField",
title:
"formPanel",
width:
300,
height:
300,
labelSeparator:
"：
",
labelAlign:
"right",
frame:
true,
items:
[
newExt.form.TimeField（{
id:
"time",
fieldLabel:
"时间",
//format:
"G时i分s秒"
format:
"g时i分s秒A"
}）
]
}）;
}
）;
maxValue属性，设置最大时间。
minValue属性，设置最小时间。
示例三：
设置时间最大值和最小值。
Ext.onReady（
function（）{
Ext.BLANK_IMAGE_URL="../Ext/resources/images/default/s.gif";
Ext.QuickTips.init（）;
varformPanle=newExt.FormPanel（{
renderTo:
"TestTimeField",
title:
"formPanel",
width:
300,
height:
300,
labelSeparator:
"：
",
labelAlign:
"right",
frame:
true,
items:
[
newExt.form.TimeField（{
id:
"time",
fieldLabel:
"时间",
//format:
"G时i分s秒"
format:
"g时i分s秒A",
minValue:
"12:
22",
maxValue:
"14:
22"
}）
]
}）;
}
）;
时间不在指定区间内提示信息。
maxText属性，设置大于最大时间提示信息。
minText属性，设置小于最小时间提示信息。
示例四：
Ext.onReady（
function（）{
Ext.BLANK_IMAGE_URL="../Ext/resources/images/default/s.gif";
Ext.QuickTips.init（）;
varformPanle=newExt.FormPanel（{
renderTo:
"TestTimeField",
title:
"formPanel",
width:
300,
height:
300,
labelSeparator:
"：
",
labelAlign:
"right",
frame:
true,
items:
[
newExt.form.TimeField（{
id:
"time",
fieldLabel:
"时间",
//format:
"G时i分s秒"
format:
"g时i分s秒A",
minValue:
"12:
22",
maxValue:
"14:
22",
minText:
"时间必须大于{0}",
maxText:
"时间必须小于{0}"
}）
]
}）;
}
）;
invalidText属性：
设置时间格式无效提示信息。
示例五：
Ext.onReady（
function（）{
Ext.BLANK_IMAGE_URL="../Ext/resources/images/default/s.gif";
Ext.QuickTips.init（）;
varformPanle=newExt.FormPanel（{
renderTo:
"TestTimeField",
title:
"formPanel",
width:
300,
height:
300,
labelSeparator:
"：
",
labelAlign:
"right",
frame:
true,
items:
[
newExt.form.TimeField（{
id:
"time",
fieldLabel:
"时间",
//format:
"G时i分s秒"
format:
"g时i分s秒A",
minValue:
"12:
22",
maxValue:
"14:
22",
minText:
"时间必须大于{0}",
maxText:
"时间必须小于{0}",
invalidText:
"请输入正确的时间格式"
}）
]
}）;
}
）;
DateField日期选择框。
示例一：
简单应用。
Ext.onReady（
function（）{
Ext.BLANK_IMAGE_URL="../Ext/resources/images/default/s.gif";
Ext.QuickTips.init（）;
varformPanle=newExt.FormPanel（{
renderTo:
"TestDateField",
title:
"formPanel",
width:
300,
height:
300,
labelSeparator:
"：
",
labelAlign:
"right",
frame:
true,
items:
[
newExt.form.DateField（{
id:
"date",
fieldLabel:
"选择日期"
}）
]
}）;
}
）;
示例二：
设置最小和最大日期以及提示信息。
Ext.onReady（
function（）{
Ext.BLANK_IMAGE_URL="../Ext/resources/images/default/s.gif";
Ext.QuickTips.init（）;
varformPanle=newExt.FormPanel（{
renderTo:
"TestDateField",
title:
"formPanel",
width:
300,
height:
300,
labelSeparator:
"：
",
labelAlign:
"right",
frame:
true,
items:
[
newExt.form.DateField（{
id:
"date",
fieldLabel:
"选择日期",
maxValue:
"12/31/2009",
minValue:
"01/01/2009",
maxText:
"日期不能大于{0}",
minText:
"日期不能小于{0}"
}）
]
}）;
}
）;
示例三：
设置日期格式。
Ext.onReady（
function（）{
Ext.BLANK_IMAGE_URL="../Ext/resources/images/default/s.gif";
Ext.QuickTips.init（）;
varformPanle=newExt.FormPanel（{
renderTo:
"TestDateField",
title:
"formPanel",
width:
400,
height:
300,
labelSeparator:
"：
",
labelAlign:
"right",
frame:
true,
items:
[
newExt.form.DateField（{
id:
"date",
fieldLabel:
"选择日期",
maxValue:
"12/31/2009",
minValue:
"01/01/2009",
maxText:
"日期不能大于{0}",
minText:
"日期不能小于{0}",
format:
"Y年m月d日",
width:
200
}）
]
}）;
}
）;
示例四：
指定禁止选择的日期。
Ext.onReady（
function（）{
Ext.BLANK_IMAGE_URL="../Ext/resources/images/default/s.gif";
Ext.QuickTips.init（）;
varformPanle=newExt.FormPanel（{
renderTo:
"TestDateField",
title:
"formPanel",
width:
400,
height:
300,
labelSeparator:
"：
",
labelAlign:
"right",
frame:
true,
items:
[
newExt.form.DateField（{
id:
"date",
fieldLabel:
"选择日期",
maxValue:
"12/31/2009",
minValue:
"01/01/2009",
maxText:
"日期不能大于{0}",
minText:
"日期不能小于{0}",
format:
"Y年m月d日",
width:
200,
disabledDates:
["2009年05月21日"],
disabledDatesText:
'禁止选择该日期'
}）
]
}）;
}
）;
注意：
这个地方官方有bug，官方发布了解决方案。
代码如下。
Ext.override（Ext.form.DateField,{
initDisabledDays:
function（）{
if（this.disabledDates）{
vardd=this.disabledDates;
varre="（?
:
";
for（vari=0;ire+=this.formatDate（dd[i]）;
if（i!
=dd.length-1）re+="|";
}
this.ddMatch=newRegExp（re+"）"）;
}
}
}）;
示例五：
设置禁止选择的星期。
newExt.form.DateField（{
id:
"date",
fieldLabel:
"选择日期",
maxValue:
"12/31/2009",
minValue:
"01/01/2009",
maxText:
"日期不能大于{0}",
minText:
"日期不能小于{0}",
format:
"Y年m月d日",
width:
200,
disabledDates:
["2009年05月21日"],
disabledDatesText:
'禁止选择该日期',
disabledDays:
[0,6],//禁止选择星期日和星期六
disabledDaysText:
'禁止选择星期六和星期日'
}）
Hidden隐藏域。
Ext.onReady（
function（）{
Ext.BLANK_IMAGE_URL="../Ext/resources/images/default/s.gif";
Ext.QuickTips.init（）;
varformPanle=newExt.FormPanel（{
renderTo:
"TestHidden",
title:
"formPanel",
width:
400,
height:
300,
labelSeparator:
"：
",
labelAlign:
"right",
frame:
true,
items:
[
newExt.form.TextField（{
name:
'userName',
width:
150,
fieldLabel:
'姓名'
}）,
newExt.form.Hidden（{//隐藏域
name:
'age',
width:
150,
fieldLabel:
'年龄'
}）,
newExt.form.TextField（{
name:
'sex',
width:
150,
fieldLabel:
'性别'
}）
]
}）;
}
）;
FieldSet，可以用来将表单组件进行分组。
Ext.onReady（
function（）{
Ext.BLANK_IMAGE_URL="../Ext/resources/images/default/s.gif";
Ext.QuickTips.init（）;
varformPanle=newExt.FormPanel（{
renderTo:
"TestFieldSet",
title:
"formPanel",
width:
400,
height:
300,
labelSeparator:
"：
",
labelAlign:
"right",
frame:
true,
items:
[
newExt.form.FieldSet（{
title:
"用户信息",
height:
100,
collapsible:
true,
items:
[
newExt.form.TextField（{
name:
"username",
fieldLabel:
"用户名"
}）,
newExt.form.TextField（{
name:
"password",
inputType:
"password",
fieldLabel:
"密码"
}）
]
}）,
newExt.form.FieldSet（{
title:
"高级信息",
height:
100,
collapsible:
true,
items:
[
newExt.form.TextField（{
name:
"name",
fieldLabel:
"姓名"
}）
]
}）
]
}）;
}
）;
vtype属性，可以用来设置一个常用的校验规则，如邮箱，网址等。
示例：
Ext.onReady（
function（）{
Ext.BLANK_IMAGE_URL="../Ext/resources/images/default/s.gif";
Ext.QuickTips.init（）;
varformPanle=newExt.FormPanel（{
renderTo:
"TestVtype",
title:
"formPanel",
width:
400,
height:
300,
labelSeparator:
"：
",
labelAlign:
"right",
frame:
true,
items:
[
newExt.form.TextField（{
fieldLabel:
'电子邮件',
vtype:
'email',
vtypeText:
"请输入正确的电子邮件格式"
}）,
newExt.form.TextField（{
fieldLabel:
'网址',
vtype:
'url',
vtypeText:
"请输入正确的网址"
}）,
newExt.form.TextField（{
fieldLabel:
'字母',
vtype:
'alpha',
vtypeText:
"请输入正确的字母"
}）,
newExt.form.TextField（{
fieldLabel:
'字母和数字',
vtype:
'alphanum',
vtypeText:
"请输入正确的字母和数字"
}）
]
}）;
}
）;
升级会员 