TimeField时间选择框
示例一:简单应用。
Ext.onReady( function() { Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";
var formPanle = new Ext.FormPanel({ renderTo:"TestTimeField", title:"formPanel", width:300, height:300, labelSeparator:":", labelAlign:"right", frame:true, items:[ new Ext.form.TimeField({ id:"time", fieldLabel:"时间" }) ] }); } ); |
format属性:用来设置时间格式。
示例二:12小时格式,24小时格式。
Ext.onReady( function() { Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init();
var formPanle = new Ext.FormPanel({ renderTo:"TestTimeField", title:"formPanel", width:300, height:300, labelSeparator:":", labelAlign:"right", frame:true, items:[ new Ext.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();
var formPanle = new Ext.FormPanel({ renderTo:"TestTimeField", title:"formPanel", width:300, height:300, labelSeparator:":", labelAlign:"right", frame:true, items:[ new Ext.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();
var formPanle = new Ext.FormPanel({ renderTo:"TestTimeField", title:"formPanel", width:300, height:300, labelSeparator:":", labelAlign:"right", frame:true, items:[ new Ext.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();
var formPanle = new Ext.FormPanel({ renderTo:"TestTimeField", title:"formPanel", width:300, height:300, labelSeparator:":", labelAlign:"right", frame:true, items:[ new Ext.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();
var formPanle = new Ext.FormPanel({ renderTo:"TestDateField", title:"formPanel", width:300, height:300, labelSeparator:":", labelAlign:"right", frame:true, items:[ new Ext.form.DateField({ id:"date", fieldLabel:"选择日期" }) ] }); } ); |
示例二:设置最小和最大日期以及提示信息。
Ext.onReady( function() { Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init();
var formPanle = new Ext.FormPanel({ renderTo:"TestDateField", title:"formPanel", width:300, height:300, labelSeparator:":", labelAlign:"right", frame:true, items:[ new Ext.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();
var formPanle = new Ext.FormPanel({ renderTo:"TestDateField", title:"formPanel", width:400, height:300, labelSeparator:":", labelAlign:"right", frame:true, items:[ new Ext.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();
var formPanle = new Ext.FormPanel({ renderTo:"TestDateField", title:"formPanel", width:400, height:300, labelSeparator:":", labelAlign:"right", frame:true, items:[ new Ext.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){ var dd = this.disabledDates; var re = "(?:"; for(var i = 0; i < dd.length; i++){ re += this.formatDate(dd[i]); if(i != dd.length-1) re += "|"; } this.ddMatch = new RegExp(re + ")"); } } }); |
示例五:设置禁止选择的星期。
new Ext.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();
var formPanle = new Ext.FormPanel({ renderTo:"TestHidden", title:"formPanel", width:400, height:300, labelSeparator:":", labelAlign:"right", frame:true, items:[ new Ext.form.TextField({ name:'userName', width : 150, fieldLabel:'姓名' }), new Ext.form.Hidden({//隐藏域 name:'age', width : 150, fieldLabel:'年龄' }), new Ext.form.TextField({ name:'sex', width : 150, fieldLabel:'性别' }) ] }); } ); |
FieldSet,可以用来将表单组件进行分组。
Ext.onReady( function() { Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init();
var formPanle = new Ext.FormPanel({ renderTo:"TestFieldSet", title:"formPanel", width:400, height:300, labelSeparator:":", labelAlign:"right", frame:true, items:[ new Ext.form.FieldSet({ title:"用户信息", height:100, collapsible:true, items:[ new Ext.form.TextField({ name:"username", fieldLabel:"用户名" }), new Ext.form.TextField({ name:"password", inputType:"password", fieldLabel:"密码" }) ] }), new Ext.form.FieldSet({ title:"高级信息", height:100, collapsible:true, items:[ new Ext.form.TextField({ name:"name", fieldLabel:"姓名" }) ] }) ] }); } ); |
vtype属性,可以用来设置一个常用的校验规则,如邮箱,网址等。
示例:
Ext.onReady( function() { Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init();
var formPanle = new Ext.FormPanel({ renderTo:"TestVtype", title:"formPanel", width:400, height:300, labelSeparator:":", labelAlign:"right", frame:true, items:[ new Ext.form.TextField({ fieldLabel:'电子邮件', vtype:'email', vtypeText:"请输入正确的电子邮件格式" }), new Ext.form.TextField({ fieldLabel:'网址', vtype:'url', vtypeText:"请输入正确的网址" }), new Ext.form.TextField({ fieldLabel:'字母', vtype:'alpha', vtypeText:"请输入正确的字母" }), new Ext.form.TextField({ fieldLabel:'字母和数字', vtype:'alphanum', vtypeText:"请输入正确的字母和数字" }) ] }); } ); |