在最近一个项目中用到了Ext,学到了很多新的东西,同时JS水平得到了大大的提升。项目中需要一个年月输入框,不带日期的,可是Ext本身不带这样的功能,没办法只能自己扩展。
G了一下得到2篇文章
http://www.javaeye.com/topic/105492
http://blog.csdn.net/forgetdavi/archive/2007/09/07/1776079.aspx
按照他的做法,依葫芦画瓢,做出来了,但是出现了问题。
首先他用的ID识别,这使得在一个页面中如果只有一个这样的控件是有效的,但是多个时,第二个被触发的控件的日期选择还是会显示,因此不能采用ID识别。
琢磨了下,修改Ext.DatePicker,把onRender 下的修改部分改为
if (this.format.indexOf('d') == -1) {
this.el.select("table.x-date-inner").hide();
this.el.child("td.x-date-bottom").hide();
}
来隐藏日期选择。
同时把update方法修改的部分改为
if (this.format.indexOf('d') == -1 && this.getValue() != date) {
this.setValue(date);
this.fireEvent("select", this, this.value);
}
来获得选择的年月比较好。
而Ext.form.DateField则不需要做任何修改。
用法如下
var date = new Ext.form.DateField({
...
format: 'Y年m月',
...
});
其中format也可以为'Ym','m/Y'等之类的只要不带d的都会按照只选择年月去执行
实现日期选择:
var grid=new Ext.grid.GridPanel({
title:'详细信息',
tbar: new Ext.Toolbar({
id:'grid-tbar',
height:40,
items:[
'按日期搜索: ',
field,
{
text:'查询',
handler:function(){
var valuee=field.getValue();
if(valuee==""){
alert("查询信息不能为空!");
}else {
var value=field.getValue().format('Y-m-d');
store.reload({params:{'dob':value,start:0, limit:25}});
}
}
}
]
}),
store:store,
maxSize:700,
minSize:700,
height:500,
disableSelection:true,
autoScroll:true,
columns:[{header:"明细ID",width:40,dataIndex:'ID',sortable:true},
{header:"表名",width:80,dataIndex:'TABLENAME',sortable:true},
{header:"错误描述",width:200,dataIndex:'ERROR_DESCRIP',sortable:true},
{header:"数据描述",width:200,dataIndex:'DATA_DESCRIP',sortable:true}]
});
var field=new Ext.form.DateField({
fieldLabel: 'Date of Birth',
name: 'dob',
width:190,
height:30,
allowBlank:false
})