ExtJs中定制日历控件——带下拉列表
效果图:
日历组件部分代码：
/*********************日历组件部分**************************** begin */
var dateArray = new Array();
var printDateArray = function(){
};
/** 班次数据源 */
var classStore = new Ext.data.JsonStore({
url: "./jxy/attendsystem/queryClassComboAction",
autoLoad: true,
method : 'post',
fields: ['id','clasName'],
root: 'data',
remoteSort: true,
listeners:{
load : function(store, records, options ){
var data = { "id": "0", "clasName": "休息"};
var rs = [new Ext.data.Record(data)];
store.insert(0,rs);
}
}
});
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]);
i = i + 1;
}
for(; i < days; ){
var divId = "div"+i;
var intDay = i - startingPos + 1;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
var comboId = "combo"+fvalue+"-"+i;
var clas = new Ext.form.ComboBox({
store: classStore,
id: comboId,
width: 60,
displayField: 'clasName',
valueField: 'id',
hiddenName: 'clasName1',
typeAhead: true,
triggerAction: 'all',
forceSelection: true,
selectOnFocus: true,
mode: 'remote',
editable: false
});
//classStore.on('load',function(){Ext.getCmp(comboId).setValue("0");});
textEls[i].innerHTML = ''+(intDay)+''+'
';
clas.render(divId);
cells[i].className = 'x-date-active';
setCellClass(this, cells[i]);
clas.on('select',function(combo,record,index ){
var str = "["+combo.id.substring(5,15)+" "+combo.getValue()+"]"
dateArray[combo.id.substring(16,combo.id.length)] = str;
});
i = i + 1;
}
var extraDays = 0;
for(; i < 42; ) {
var tempId = "fruit"+i;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
textEls[i].innerHTML = ''+(++extraDays)+''+'
';
cells[i].className = 'x-date-nextday';
setCellClass(this, cells[i]);
i = i + 1;
}
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 */
在每个日期格中有一个下拉列表，这里面可以是在本地定义，也可以在数据库中查询，这里的处理是：下拉框中选择了就按照相对应的key来存，如果没有选择的话就按照空来处理，单击【确定】按钮后获取的结果格式如下：
",,,,,,[2013-06-01 1],[2013-06-02 2],,,,,,,,,,,,,,,[2013-06-17 1],[2013-06-18 2],[2013-06-19 3],,,,,,,[2013-06-26 2]"
转成字符串（传递参数识别的类型）：
if(dateArray != null && dateArray != "") {
content = dateArray.join(','); //数组的话，不识别，要转换成字符串才可以
}
引用日历组件的部分代码：
, {
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
]
}]
}
注意：单击【确定】按钮后获取的值可以根据用户自己的需求来定义，代码是在3个for循环中修改。
var i = 0;
for(; i < startingPos; ) {
var tempId = "fruit"+i;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
textEls[i].innerHTML = ''+(++prevStart)+''+'
';
cells[i].className = 'x-date-prevday';
setCellClass(this, cells[i]);
i = i + 1;
}
for(; i < days; ){
var divId = "div"+i;
var intDay = i - startingPos + 1;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
var comboId = "combo"+fvalue+"-"+i;
var clas = new Ext.form.ComboBox({
store: classStore,
id: comboId,
width: 60,
displayField: 'clasName',
valueField: 'id',
hiddenName: 'clasName1',
typeAhead: true,
triggerAction: 'all',
forceSelection: true,
selectOnFocus: true,
mode: 'remote',
editable: false
});
//classStore.on('load',function(){Ext.getCmp(comboId).setValue("0");});
textEls[i].innerHTML = ''+(intDay)+''+'
';
clas.render(divId);
cells[i].className = 'x-date-active';
setCellClass(this, cells[i]);
clas.on('select',function(combo,record,index ){
var str = "["+combo.id.substring(5,15)+" "+combo.getValue()+"]"
dateArray[combo.id.substring(16,combo.id.length)] = str;
});
i = i + 1;
}
var extraDays = 0;
for(; i < 42; ) {
var tempId = "fruit"+i;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
textEls[i].innerHTML = ''+(++extraDays)+''+'
';
cells[i].className = 'x-date-nextday';
setCellClass(this, cells[i]);
i = i + 1;
}
如果有问题，欢迎指正和讨论。