第二種解法支援 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 的名字也換掉了。這樣看起來，升級阻力較大。只能自己來實現這個擴充了。
/*********************************
* @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:[
'
',
'',
'
',
'',
'',
'Wk ',
' | ',
'',
'',
'{.:this.firstInitial} ',
' | ',
'',
'
',
'',
'',
'{#:this.isEndOfWeek}',
'{#:this.isBeginOfWeek}',
'',
'',
' | ',
'',
'
',
'
',
'
',
'',
'',
'
',
{
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( );
}
}
});
}很簡單：
2. 改寫fullUpdate，設定星期的值。會執行兩次。
