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触发语句即可)
上一篇: Android系统JNI解决上层直接调用Linux内核层
下一篇: 几种常见的排序运用
推荐阅读
-
Python中的sort怎么使用
-
Nginx中禁止使用IP访问网站的配置实例
-
CSS3中的常用选择器使用示例整理
-
ThinkJS中如何使用MongoDB的CURD操作
-
Vim中查找替换及正则表达式的使用详解
-
谷歌浏览器怎么使用Adblock Plus插件去网页中的广告?
-
万彩录屏大师如何使用?万彩录屏大师中为视频添加水印的方法
-
微信小程序 image组件binderror使用例子与js中的onerror区别
-
VMware Workstation/Fusion 中安装 Fedora 23/24 及其他 Linux 系统时使用 Open VM Tools 代替 VMware Tools 增强工具的方法
-
使用PHP导出Redis数据到另一个Redis中的代码