Ext JS 4 implements date selection control with week (Practical Combat 1)_extjs

Foreword

Both Ext JS 3 and Ext JS 4 provide components for date selection (of course earlier versions also have them).


But some date selection needs to see the week, that is, which day in the date is the week of the year.

Unfortunately, Ext js does not provide such a configuration.

(For Ext js 4, the ideal method is to have a configuration item like showWeek in Ext.picker.Date)

Existing solution

Go to the Internet to see solutions based on Ext js: I found two

http://enikao.net/extjs/weeknumber/weeknumber.html

and

http://www.lubber.de/extjs/datepickerplus/

The first solution works on IE but cannot be displayed on other browsers, so just ignore it.

The second solution supports Ext js 2 and Ext js 3 versions, but does not support Ext js 4. Based on my personal experience in upgrading Ext js, I initially felt that there should be no problem in upgrading this extension to Ext js 4. After tinkering for a long time, I gave up. After Ext js 3 was upgraded to Ext js 4, the display elements of the date page have also been modified. The old version mostly used tr td, while the new version has some more div and a elements. And the name of the class has also been changed. It seems that there is greater resistance to upgrading. You can only implement this extension yourself.

Ext JS 4 date control extension

Paste the code first:

Copy code The code is as follows:

/*********************************
* @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{
weekNodes[j].innerHTML = begMonWeek.toString();
begMonWeek ;
}
},
onRender : function(container, position){
var me = this;
me.callParent(arguments);
me.cells = me.eventEl.select('tbody td[role="gridcell"]');
me.textNodes = me.eventEl.query('tbody td[role="gridcell"] a');

//begin extend
me.weekcells= me.eventEl.select('tbody td[role="weekcell"]');
me.weekNodes= me.eventEl.query('tbody td[role="weekcell"] a');
//end extend
me.mon(me.eventEl, {
scope: me,
mousewheel: me.handleMouseWheel,
click: {
//fn: me.handleDateClick,
fn: function(){},
delegate: 'a.' me.baseCls '-date'
}
});
}
/*,initComponent: function(){
this.callParent();
}*/
});

/*
* Date Form field use Date Picker with Week
*/
Ext.define('Ext.ux.DateFieldWithWeek',{
extend: "Ext.form.field.Date",
alias : "widget.datefieldwithweek",
/*initComponent: 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 要给一个空函数，否则选日期的时候会执行两次。