Ext JS 4实战一 带星期的日期选择控件

前言

Ext JS 3 与 Ext JS 4 均内置了日期选择组件（早期版本也同样支持）。然而，在某些应用场景下，用户希望能够直观地查看“周数”——即当前日期属于一年中的第几周。遗憾的是，Ext 官方并未提供类似 showWeek 的直接配置开关（例如在 Ext.picker.Date 中启用）。

现有的解决方案

经过在线搜索，目前主要找到两种方案：

• enikao.net 提供的方案：仅在 IE 浏览器下能正常工作，在其他浏览器中直接无法显示。因此只能放弃该方案。
• lubber.de 的扩展方案：支持 Ext JS 2 和 3，但不兼容 Ext JS 4。原本以为只需将扩展升级到版本 4 即可（毕竟有升级经验），然而经过大量调试后，最终仍因兼容性难题而放弃——Ext JS 3 到 4 的日期组件改动较大，原有表格结构（tr/td）被替换为大量的 div 和 a 元素，CSS 类名也全面变更。升级阻力过大，遂决定自行编写一个全新扩展。

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)%}

', '', '

', '', '', '', '', '', '', '', '', '', '{#:this.isEndOfWeek}', '{#:this.isBeginOfWeek}', '', '', '', '

', ' Wk ', '	', ' {.:this.firstInitial} ', '
', '', '

', '', '

{%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

核心实现原理说明：

1. 通过改写 renderTpl 模板，在表格表头中额外增加一列用于显示“Wk”（周数标识）。
2. 重写 fullUpdate 方法，借助 Ext.Date.getWeekOfYear 计算出当月第一天所在的周数，再依次填充到各周对应的单元格内。
3. 在 onRender 中需特别注意：click 事件的 fn 不能直接指定为 me.handleDateClick（否则在选择日期时会触发两次响应），必须使用一个空函数 function(){} 来替代。