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

Source

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

})

]

});

}

);