梦入神机_[Ext JS 4] 實(shí)戰之帶week(星期)的日期選擇控件| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS 4] 實(shí)戰之帶week(星期)的日期選擇控件

## [Ext JS 4] 實(shí)戰之 帶week(星期)的日期選擇控件
### 前言
Ext JS 3 和 Ext JS 4中都有提供日期選擇的組件(當然早期版本也有)。

但是有一些日期選擇的需求是要看到星期，就是日期中的哪一天是這一年的第幾周。
遺憾的是Ext js 并沒(méi)有提供這樣的配置。
（針對Ext js 4來(lái)說(shuō)，理想的相法是在Ext.picker.Date有一個(gè) 類(lèi)似showWeek這樣的配置項）

### 現有的解法
到網(wǎng)絡(luò )上去看看基于Ext js 的解法：有找到兩個(gè)
http://enikao.net/extjs/weeknumber/weeknumber.html
和
http://www.lubber.de/extjs/datepickerplus/
第一種解法在IE上work, 在其他瀏覽器上顯示不出來(lái)， 直接忽視。
第二種解法支持 Ext js 2 和 Ext js 3 版本，但是不支持Ext js 4。憑著(zhù)個(gè)人在Ext js 升級上的一些經(jīng)驗，一開(kāi)始覺(jué)得把這個(gè)擴展升級到Ext js 4應該沒(méi)有什么問(wèn)題。鼓搗了半天，放棄了。 Ext js 3 升級到Ext js 4后， 日期頁(yè)面的顯示元素也做了修改， 舊版本用 tr td 居多，新版本中多了一些 div 和 a 元素。而且class 的名字也換掉了。這樣看起來(lái)，升級阻力較大。只能自己來(lái)實(shí)現這個(gè)擴展了。
擴展
### Ext JS 4 日期控件擴展
先貼上代碼：
```javascript
/*********************************
 * @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)%}
',
'',
'
',
'',
'',
'',
'
Wk
',
'',
'',
'',
'
{.:this.firstInitial}
',
'',
'',
'',
'',
'',
'{#:this.isEndOfWeek}',
'{#:this.isBeginOfWeek}',
'',
'',
'',
'',
'',
'',
'',
'
{%this.renderTodayBtn(values, out)%}
',
'',
'
',
{
firstInitial: function(value) {
//alert(value);
returnExt.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(newDate(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;jnumWeeks;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;
returnnewExt.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();
}
}
});
}
});
```

原理很簡(jiǎn)單：
1.  改寫(xiě) renderTpl， 增加星期顯示的列
2.  改寫(xiě)fullUpdate， 設置星期的值。 Ext 有提供getWeekOfYear這個(gè)方法可以獲取星期
3. onRender。 這里需要特別注意的就是click  中的fn: me.handleDateClick 要給一個(gè)空函數，否則選日期的時(shí)候會(huì )執行兩次。

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS 4] 實(shí)戰之帶week(星期)的日期選擇控件

網(wǎng)站導航

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

Ext JS開(kāi)發(fā)大全

[Ext JS 4] 實(shí)戰之 帶week(星期)的日期選擇控件

網(wǎng)站導航

[Ext JS 4] 實(shí)戰之帶week(星期)的日期選擇控件