修改Ext.DatePicker使得Ext.form.DateField只选择年月

在最近一个项目中用到了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
                    })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值