ExtJs中定制日历控件——带复选框
效果图：
代码：
/*********************日历组件部分**************************** begin */
var dateArray = new Array();
var printDateArray = function(){
};
Ext.MyDatePicker = Ext.extend(Ext.DatePicker, {
todayText : '确定',
okText : ' 确定 ',
cancelText : '取消',
todayTip : '{0} (Spacebar)',
minText : 'This date is before the minimum date',
maxText : 'This date is after the maximum date',
format : 'Y-m-d',
disabledDaysText : 'Disabled',
disabledDatesText : 'Disabled',
dayNames : Date.dayNames,
nextText : 'Next Month (Control+Right)',
prevText : 'Previous Month (Control+Left)',
monthYearText : 'Choose a month (Control+Up/Down to move years)',
startDay : 0,
showToday : true,
initComponent : function(){
Ext.MyDatePicker.superclass.initComponent.call(this);
this.value = this.value ?
this.value.clearTime() : new Date().clearTime();
this.addEvents(
'select'
);
if(this.handler){
this.on('select', this.handler, this.scope || this);
}
this.initDisabledDays();
},
onRender : function(container, position){
var m = [
''+(++prevStart)+''+'
排休';
cells[i].className = 'x-date-prevday';
setCellClass(this, cells[i]);
Ext.get(tempId).on('click',function(e,f){
if(Ext.get(f.id).dom.checked){
dateArray[f.id.substring(5,f.id.length)] = f.value;
}else{
dateArray[f.id.substring(5,f.id.length)] = "";
}
});
}
for(; i < days; i++){
var tempId = "fruit"+i;
var intDay = i - startingPos + 1;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
textEls[i].innerHTML = ''+(intDay)+''+'
排休';
cells[i].className = 'x-date-active';
setCellClass(this, cells[i]);
Ext.get(tempId).on('click',function(e,f){
if(Ext.get(f.id).dom.checked){
dateArray[f.id.substring(5,f.id.length)] = f.value;
}else{
dateArray[f.id.substring(5,f.id.length)] = "";
}
});
}
var extraDays = 0;
for(; i < 42; i++) {
var tempId = "fruit"+i;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
textEls[i].innerHTML = ''+(++extraDays)+''+'
排休';
Ext.get(tempId).on('click',function(e,f){
if(Ext.get(f.id).dom.checked){
dateArray[f.id.substring(5,f.id.length)] = f.value;
}else{
dateArray[f.id.substring(5,f.id.length)] = "";
}
});
cells[i].className = 'x-date-nextday';
setCellClass(this, cells[i]);
}
this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
if(!this.internalRender){
var main = this.el.dom.firstChild;
var w = main.offsetWidth;
this.el.setWidth(w + this.el.getBorderWidth('lr'));
Ext.fly(main).setWidth(w);
this.internalRender = true;
// opera does not respect the auto grow header center column
// then, after it gets a width opera refuses to recalculate
// without a second pass
if(Ext.isOpera && !this.secondPass){
main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
this.secondPass = true;
this.update.defer(10, this, [date]);
}
}
},
beforeDestroy : function() {
if(this.rendered){
Ext.destroy(
this.keyNav,
this.monthPicker,
this.eventEl,
this.mbtn,
this.nextRepeater,
this.prevRepeater,
this.cells.el,
this.todayBtn
);
delete this.textNodes;
delete this.cells.elements;
}
}
});
Ext.reg('mydatepicker', Ext.MyDatePicker);
var myDate = new Ext.MyDatePicker();
/*********************日历组件部分**************************** end */
引用此组件处：
, {
xtype: 'panel',
style: 'margin-left:50;',
layout: 'column',
id: 'calendarArea',
width: 700,
height: 400,
border: true,
items: [{
layout: 'form',
width: '98%',
height: '98%',
items:[
/** 这里放置日历控件 */
myDate
]
}]
}
日历控件最下方有一个确定按钮，勾选完复选框之后，单击这个【确定】按钮，会返回给页面一个数组dateArray，其格式如下：
",,,,,2013-05-31,2013-06-01,,,,,,,,,,,,2013-06-13,2013-06-14,,,,,,,,,,,,,,2013-06-28,2013-06-29,2013-06-30,2013-07-01";
if(dateArray != null && dateArray != "") {
content = dateArray.join(','); //数组的话，不识别，要转换成字符串才可以
}
后台逻辑中根据具体的业务来对这个字符串进行分析即可。