Ext JS 4实现带星期的日期选择控件实战一
作者：技术拾光时间：2026-06-10 08:20:02浏览：301
前言 Ext JS 3 和 Ext JS 4 都内建了日期选择组件（早期版本同样如此）。但在某些使用场景下，用户需要查看“周数”，即当前日期属于一年中的第几周。遗憾的是，Ext 官方并未提供直接配置选项（例如在 Ext.picker.Date 上增加一个 showWeek 开关）。 现有的解法 在网
前言
Ext JS 3 和 Ext JS 4 都内建了日期选择组件（早期版本同样如此）。但在某些使用场景下，用户需要查看“周数”，即当前日期属于一年中的第几周。遗憾的是，Ext 官方并未提供直接配置选项（例如在 Ext.picker.Date 上增加一个 showWeek 开关）。
现有的解法
在网络上搜索后，找到两个方案：
- enikao.net 的方案：仅在 IE 下正常工作，其他浏览器中无法显示。果断放弃。
- lubber.de 的方案：支持 Ext JS 2 和 3，但不支持 4。原本以为将扩展升级到 4 不算困难（毕竟有升级经验），但折腾了大半天后还是放弃了——Ext JS 3 到 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:[
'' : '';
},
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
',
'',
'',
'
',
'',
'',
' ',
'
',
{
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 '| ',
' Wk ',
' | ',
'',
' {.:this.firstInitial} ',
' | ',
'
|---|---|
| ', '', ' | ', '
原理很简单：
- 改写
renderTpl，在表头增加一列用于显示“Wk”（周数）。 - 改写
fullUpdate，利用Ext.Date.getWeekOfYear方法计算当前月第一天所在的周数，然后依次填充到对应单元格中。 - 在
onRender中需要注意：click事件的fn不能直接写me.handleDateClick（否则选择日期时会触发两次），必须用一个空函数function(){}代替。