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

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:"请输入正确的字母和数字" }) ] }); } );