现在我们给上次做的表单加上一个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是专用于中文的脚本。