Ext JS 4에서는 week(Practical Combat 1)_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에서는 작동하지만 다른 브라우저에서는 표시할 수 없으므로 무시하세요.

두 번째 솔루션은 Ext js 2 및 Ext js 3 버전을 지원하지만 Ext js 4는 지원하지 않습니다. Ext js를 업그레이드한 개인적인 경험을 바탕으로 처음에는 이 확장을 Ext js 4로 업그레이드하는 데 문제가 없을 것이라고 느꼈습니다. 오랫동안 고민하다가 포기했습니다. Ext js 3이 Ext js 4로 업그레이드된 후 날짜 페이지의 표시 요소도 수정되었습니다. 이전 버전은 주로 tr td를 사용했지만 새 버전에는 div와 a 요소가 더 많이 포함되었습니다. 그리고 클래스 이름도 변경되었습니다. 업그레이드에 대한 저항이 더 큰 것 같습니다. 이 확장은 사용자 본인만 구현할 수 있습니다.

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: 함수(값){
//value--;
//값--;
var end = (값 === 1 || (값-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();
begMonWeek ;
}
},
onRender : function(컨테이너, 위치){
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');
//end 확장
me.mon(me.eventEl, {
scope: me,
mousewheel: me.handleMouseWheel,
click: {
//fn: me. handlerDateClick,
fn: function(){},
delegate: 'a.' me.baseCls '-date'
}
});
}
/*,initComponent: function(){
this.callParent();
}*/
});

/*
* 날짜 양식 필드는 주와 날짜 선택기를 사용합니다.
*/
Ext.define('Ext.ux.DateFieldWithWeek',{
extend: "Ext.form .field.Date",
별칭: "widget.datefieldwithweek",
/*initComponent: function(){
this.callParent();
},*/
createPicker: 함수 (){
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,
형식: me.format,
showToday: me.showToday ,
startDay: me.startDay,
minText: 형식(me.minText, me.formatDate(me.minValue)),
maxText: 형식(me.maxText, me.formatDate(me.maxValue) ),
청취자: {
범위: me,
select: me.onSelect
},
keyNavConfig: {
esc: function() {
me.collapse( );
}
}
});
}
});

원리很简单：

1. 改写 renderTpl， 增加星期显示的列

2. 改写fullUpdate， 设置星期的值。 Ext 有提供getWeekOfYear这个方法可以获取星期

3. onRender. 这里需要特别注의심있는就是click 中的fn: me.handleDateClick 要给一个空函数，否则选日期 时候会执行两次。