前言
ext js 3 和 ext js 4中都有提供日期选择的组件(当然早期版本也有)。
但是有一些日期选择的需求是要看到星期，就是日期中的哪一天是这一年的第几周。
遗憾的是ext js 并没有提供这样的配置。
（针对ext js 4来说，理想的相法是在ext.picker.date有一个 类似showweek这样的配置项）
现有的解法
到网络上去看看基于ext js 的解法：有找到两个
http://enikao.net/extjs/weeknumber/weeknumber.html
和
http://www.lubber.de/extjs/datepickerplus/
第一种解法在ie上work, 在其他浏览器上显示不出来， 直接忽视。
第二种解法支持 ext js 2 和 ext js 3 版本，但是不支持ext js 4。凭着个人在ext js 升级上的一些经验，一开始觉得把这个扩展升级到ext js 4应该没有什么问题。鼓捣了半天，放弃了。 ext js 3 升级到ext js 4后， 日期页面的显示元素也做了修改， 旧版本用 tr td 居多，新版本中多了一些 div 和 a 元素。而且class 的名字也换掉了。这样看起来，升级阻力较大。只能自己来实现这个扩展了。
ext js 4 日期控件扩展
先贴上代码：
复制代码 代码如下:
/*********************************
* @author: oscar999
* @description: new widgets extend from ext
* @verion: v1.0
**********************************/
/**
* date picker with week
*/
ext.define('ext.ux.datepickerwithweek',{
extend: ext.picker.date,
alias : widget.datepickerwithweek,
width: 197,
numweeks: 6,
rendertpl:[
'',
'',
'',
'{%this.rendermonthbtn(values, out)%}
',
'',
'
',
'',
'',
'',
'wk
',
'',
'',
'',
'{.:this.firstinitial}
',
'',
'',
'
',
'',
'',
'{#:this.isendofweek}',
'{#:this.isbeginofweek}',
'',
'',
' ',
'',
'
',
'
',
'',
'{%this.rendertodaybtn(values, out)%}
',
'',
'
',
{
firstinitial: function(value) {
//alert(value);
return ext.picker.date.prototype.getdayinitial(value);
},
isbeginofweek: function(value){
//value--;
//value--;
var end = (value === 1 || (value-1)%7 === 0);
return end ? ' ' : '';
},
isendofweek: function(value) {
value--;
var end = value % 7 === 0 && value !== 0;
return end ? '' : '';
},
rendertodaybtn: function(values, out) {
ext.domhelper.generatemarkup(values.$comp.todaybtn.getrendertree(), out);
},
rendermonthbtn: function(values, out) {
ext.domhelper.generatemarkup(values.$comp.monthbtn.getrendertree(), out);
}
}
],
fullupdate: function(date){
this.callparent([date]);
var me = this;
var weeknodes = me.weeknodes;
var curweekstart = ext.date.cleartime(new date(date.getfullyear(), date.getmonth(), 1));
var begmonweek = ext.date.getweekofyear(curweekstart);
var firstdayofmonth = ext.date.getfirstdayofmonth(curweekstart);
if(firstdayofmonth===0)
{
begmonweek +=1;
}
for(j=0;j{
weeknodes[j].innerhtml = begmonweek.tostring();
begmonweek++;
}
},
onrender : function(container, position){
var me = this;
me.callparent(arguments);
me.cells = me.eventel.select('tbody td[role=gridcell]');
me.textnodes = me.eventel.query('tbody td[role=gridcell] a');
//begin extend
me.weekcells= me.eventel.select('tbody td[role=weekcell]');
me.weeknodes= me.eventel.query('tbody td[role=weekcell] a');
//end extend
me.mon(me.eventel, {
scope: me,
mousewheel: me.handlemousewheel,
click: {
//fn: me.handledateclick,
fn: function(){},
delegate: 'a.' + me.basecls + '-date'
}
});
}
/*,initcomponent: function(){
this.callparent();
}*/
});
/*
* date form field use date picker with week
*/
ext.define('ext.ux.datefieldwithweek',{
extend: ext.form.field.date,
alias : widget.datefieldwithweek,
/*initcomponent: function(){
this.callparent();
},*/
createpicker : function(){
var me = this
format = ext.string.format;
return new ext.ux.datepickerwithweek({
pickerfield: me,
ownerct: me.ownerct,
renderto: document.body,
floating: true,
hidden: true,
focusonshow: true,
mindate: me.minvalue,
maxdate: me.maxvalue,
disableddatesre: me.disableddatesre,
disableddatestext: me.disableddatestext,
disableddays: me.disableddays,
disableddaystext: me.disableddaystext,
format: me.format,
showtoday: me.showtoday,
startday: me.startday,
mintext: format(me.mintext, me.formatdate(me.minvalue)),
maxtext: format(me.maxtext, me.formatdate(me.maxvalue)),
listeners: {
scope: me,
select: me.onselect
},
keynavconfig: {
esc: function() {
me.collapse();
}
}
});
}
});
原理很简单：
1. 改写 rendertpl， 增加星期显示的列
2. 改写fullupdate， 设置星期的值。 ext 有提供getweekofyear这个方法可以获取星期
3. onrender。 这里需要特别注意的就是click 中的fn: me.handledateclick 要给一个空函数，否则选日期的时候会执行两次。