Ext JS 4實作帶week(星期)的日期選擇控制項(實戰一)_extjs

前言

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

',

'',
'

',
'',
'',
'',
'',
'',
'',

'',
'',
'',
'{#: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){
//值--;
//值--;
var end = (value === 1 || (value-1)%7 === 0);
返回結束？

},
isEndOfWeek: function(value) {
value--;
var end = 值 % 7 === 0 && 值 !== 0;
回傳結束？
},
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();
求週一週；
}
},
onRender : 函數(容器, 位置){
var me = this;
me.callParent(參數);
me.cells = me.eventEl.select('tbody td[role="gridcell"]');
me.textNodes = me.eventEl.query('tbody td[role="gridcell"] a');

//開始擴充
me.weekcells= me.eventEl.select('tbody td[role="weekcell"]');
me.weekNodes= me.eventEl.query('tbody td[role="weekcell"] a');
//結束擴充
me.mon(me.eventEl, {
scope: me,
滑鼠滾輪: me.handleMouseWheel,
click: {
//fn: me .handleDateClick,
fn: function(){},
委託: 'a.' me.baseCls '-date'
}
});
}
/*,initComponent: function(){
this.callParent();
}*/
});

/*
* 日期表單欄位使用標記週的日期選擇器
*/
Ext.define('Ext.ux.DateFieldWithWeek',{
extend: " Ext.form .field.Date",
alias : "widget.datefieldwithweek",
/*initComponent: function(){
this.callParent();
},*/
createPicker : 函數(){
var me = this
format = Ext.String.format
return new Ext.ux.DatePickerWithWeek({
pickerField: me,
,
renderTo: document.body,
浮動: true,
隱藏: true,
focusOnShow: true,
minDate: me.minValue,
maxDate: me.maxValue, maxDate: me.maxValue, 停用日期RE：me.disabledDatesRE，
disabledDatesText：me.disabledDatesText，
disabledDays：me.disabledDays，
disableddsText：me.disabledDays，startDay: me.startDay,
minText: 格式(me.minText, me.formatDate(me.minValue)),
maxText: 格式(me.maxText, me.formatDate( me.maxValue) ),
監聽器: {
範圍: me,
選擇: me.onSelect
},
keyNavConfig: {
esc: function() {
me.collapse( );
}
}
});



}很簡單：

1.改寫原理renderTpl ，增加顯示星期的欄位2. 改寫fullUpdate，設定星期的值。會執行兩次。