前言

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://ponent: 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 要给一个空函数，否则选日期的时候会执行两次。