第十讲：ExtJS组件之FormPanel(下)

- 日理万妓 2022-04-14 06:28 221阅读 0赞

TimeField时间选择框

示例一：简单应用。

format属性：用来设置时间格式。

示例二：12小时格式，24小时格式。

maxValue属性，设置最大时间。

minValue属性，设置最小时间。

示例三：设置时间最大值和最小值。

时间不在指定区间内提示信息。

maxText属性，设置大于最大时间提示信息。

minText属性，设置小于最小时间提示信息。

示例四：

invalidText属性：设置时间格式无效提示信息。

示例五：

DateField日期选择框。

示例一：简单应用。

示例二：设置最小和最大日期以及提示信息。

示例三：设置日期格式。

示例四：指定禁止选择的日期。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { &nbsp; &nbsp; Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init(); &nbsp; var&nbsp;formPanle = new&nbsp;Ext.FormPanel({ renderTo:"TestDateField", title:"formPanel", width:400, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new&nbsp;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 :'禁止选择该日期' }) ] }); &nbsp; &nbsp; &nbsp; } ); </td> 
 </tr> 
 </tbody> 
</table>

注意：这个地方官方有bug，官方发布了解决方案。代码如下。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.override(Ext.form.DateField, { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initDisabledDays : function(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(this.disabledDates){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;dd = this.disabledDates; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;re = "(?:"; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i = 0; i &lt; dd.length; i++){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;re += this.formatDate(dd[i]); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(i != dd.length-1) re += "|"; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.ddMatch = new&nbsp;RegExp(re + ")"); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp; }); </td> 
 </tr> 
 </tbody> 
</table>

示例五：设置禁止选择的星期。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> new&nbsp;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 : '禁止选择星期六和星期日' }) </td> 
 </tr> 
 </tbody> 
</table>

Hidden隐藏域。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init(); &nbsp; var&nbsp;formPanle = new&nbsp;Ext.FormPanel({ renderTo:"TestHidden", title:"formPanel", width:400, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new&nbsp;Ext.form.TextField({ name:'userName', width : 150, fieldLabel:'姓名' }), new&nbsp;Ext.form.Hidden({ //隐藏域 name:'age', width : 150, fieldLabel:'年龄' }), new&nbsp;Ext.form.TextField({ name:'sex', width : 150, fieldLabel:'性别' }) ] }); } ); </td> 
 </tr> 
 </tbody> 
</table>

FieldSet，可以用来将表单组件进行分组。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init(); &nbsp; var&nbsp;formPanle = new&nbsp;Ext.FormPanel({ renderTo:"TestFieldSet", title:"formPanel", width:400, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new&nbsp;Ext.form.FieldSet({ title:"用户信息", height:100, collapsible:true, items:[ new&nbsp;Ext.form.TextField({ name:"username", fieldLabel:"用户名" }), new&nbsp;Ext.form.TextField({ name:"password", inputType:"password", fieldLabel:"密码" }) ] }), new&nbsp;Ext.form.FieldSet({ title:"高级信息", height:100, collapsible:true, items:[ new&nbsp;Ext.form.TextField({ name:"name", fieldLabel:"姓名" }) ] }) ] }); } ); </td> 
 </tr> 
 </tbody> 
</table>

vtype属性，可以用来设置一个常用的校验规则，如邮箱，网址等。

示例：

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init(); &nbsp; var&nbsp;formPanle = new&nbsp;Ext.FormPanel({ renderTo:"TestVtype", title:"formPanel", width:400, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new&nbsp;Ext.form.TextField({ fieldLabel:'电子邮件', vtype:'email', vtypeText:"请输入正确的电子邮件格式" }), new&nbsp;Ext.form.TextField({ fieldLabel:'网址', vtype:'url', vtypeText:"请输入正确的网址" }), new&nbsp;Ext.form.TextField({ fieldLabel:'字母', vtype:'alpha', vtypeText:"请输入正确的字母" }), new&nbsp;Ext.form.TextField({ fieldLabel:'字母和数字', vtype:'alphanum', vtypeText:"请输入正确的字母和数字" }) ] }); } ); </td> 
 </tr> 
 </tbody> 
</table>