现在我们给上次做的表单加上一个datefield控件,这个控件可以支持用户选择日期
<link type="text/css" rel="stylesheet" href="/ext-2.1/resources/css/ext-all.css">
<script type="text/javascript" src="/ext-2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-2.1/ext-all.js"></script>
<script type="text/javascript" src="/ext-2.1/source/locale/ext-lang-zh_CN.js"></script>
<script>
Ext.onReady(function(){
new Ext.Window({
modal:true,
title:'添加用户',
resizable:false,
width:500,
layout:'form',
bodyStyle: 'padding:5px 5px 0',
labelWidth:60,
height:240,
plain:true,
buttonAlign:'center',
items:[{
baseCls:'x-plain',
layout:'column',
items:[{
labelWidth:60,
layout:'form',
baseCls:'x-plain',
columnWidth:.5,
defaultType:'textfield',
items:[{
fieldLabel:"姓名"
},{
fieldLabel:"性别"
},{
xtype:"datefield",
format:"Y-m-d",
readOnly:true,
fieldLabel:"出生日期"
},{
fieldLabel:"地址"
}]
},{
baseCls:'x-plain',
labelWidth:60,
layout:'form',
columnWidth:.5,
defaultType:'textfield',
items:[{
fieldLabel:"照片",
inputType :"image",
width:120,
height:100
}]
}]
},{
xtype:'textfield',
fieldLabel:"详细地址",
width:410
},{
xtype:'textfield',
fieldLabel:"关系",
width:410
}],
buttons:[{text:"确定"},{text:"取消"}],
listeners:{
"show":function(_window)
{
_window.findByType('textfield')[4].getEl().dom.scr="a.gif";
}
}
}).show();
});
</script>
datefield控件有一些属性
formate:指定客户选择完控件后在文本框中显示的格式。常用格式Y-m-d
readOnly:文本框只读属性
最后有一点也是一上来困要我的就是默认datefield控件的月份选择是英文,需要在页面上引入相应的语言脚本。
<script type="text/javascript" src="/ext-2.1/source/locale/ext-lang-zh_CN.js"></script>
source/locale/ext-lang-zh_CN.js是专用于中文的脚本。
本文介绍了如何在ExtJS中使用DateField控件实现日期选择功能,并设置了只读属性及中文语言包,确保用户友好地输入出生日期。
662

被折叠的 条评论
为什么被折叠?



