欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ext中datepicker的使用 EXTAjaxCC++C# 

程序员文章站 2022-07-15 08:48:17
...
//以下代码功能实现在日历上针对不同日期设置不同的样式,
//例如可实现日程管理中有日程安排的一天的特殊显示样式
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触发语句即可)