Ext中datepicker的使用

//以下代码功能实现在日历上针对不同日期设置不同的样式,
//例如可实现日程管理中有日程安排的一天的特殊显示样式
this.calendarPanel = new Ext.FormPanel({
    region:"west",
    id:"calendarPanel",
    title:"日历",
    width:183,
    margins:"-2 -2 -2 0",
//  cmargins:"3 3 3 3",
    layout:"table",
    items:[{
        id:"datepicker",
        xtype:"calendarpicker",
        cancelText:'取消',
        monthYearText:'选择一个月 (Control+Up/Down来改变年)',
        nextText:'下月 (Control+Right)',
        okText:'确定',
        prevText:'上月 (Control+Left)',
        todayText:'今天',
        todayTip:today + ' (空格键选择)',
        monthNames:mNames,
        dayNames:dNames,
        value:new Date(),
        listeners:{
            select:{
                fn:function(dp,date){
                    var selectDate = date.format('Y-m-d');
                    Ext.apply(this.calendarStore.baseParams, {
                        startDate:selectDate, endDate:selectDate
                    }); 
                    this.calendarStore.reload({params:{start:0, limit:this.paging.pageSize}});
                    if(selectDate.substring(5,7) != lastSelectDay.substring(5,7)){
                        Ext.apply(this.monthCalendarStore.baseParams, {
                            startDate:date.format('Y-m') + '-00', endDate:date.format('Y-m') + '-31'
                        }); 
                        this.monthCalendarStore.reload({params:{start:0, limit:this.paging.pageSize}});
                    }
                    getCaleDays();//返回需要设置显示的日期
                    lastSelectDay = selectDate;
                },
                scope:this,
                delay:100
            }
        }
    }]
})
var caleDays = new Array(); 
var requestFlag = true;//是否请求标志,即若已请求过并返回结果,则不再进行请求
//获得需要显示的日期
function getCaleDays(){
    if(requestFlag){
        Ext.Ajax.request({
            method:'post', 
            url: 'getCalendarDay.jsp',
            scope: this,   
            success: function(response){
                eval("caleDays = " + response.responseText + ";");
                requestFlag = false;
                setDayStyle();//在此调用乃解决异步请求的处理问题
            }
        });
    }
    else{//否则直接调用
        setDayStyle();
    }
}
//设置显示样式
function setDayStyle(){
    var compareDay;
    Ext.getCmp('datepicker').getEl().select("table.x-date-inner tbody td").each(function(c){
        compareDay = new Date(c.dom.firstChild.dateValue).format('Y-m-d');
        for(var i=0;i<caleDays.length;i++){
            if(compareDay == caleDays[i]){
                c.addClass("calendar-days");
            }
        }
    });
}

注:关于具体的样式设计,在此就不多涉及了,有需要的,可针对具体情况自行设计.
另:以上代码在初始时,未能正常加载,为此,还需修改datepicker的代码(需要修改的地方不多,只需在几处地方增加相应的select触发语句即可)