ExtJs定制日历控件——定制部分解析

最新推荐文章于 2025-05-07 11:55:05 发布

天使路

最新推荐文章于 2025-05-07 11:55:05 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJs 文章标签： Ext JS 日历

本文链接：https://blog.csdn.net/linglinglu/article/details/12998665

ExtJs 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在ExtJS中定制日历控件，重点关注日历控件中日期单元格的定制。文章通过分析源码中的三个for循环，特别是针对当前月份的循环，展示了如何自定义显示和操作日历的各个日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日历控件中，我们自己需要写的就是每一个日期单元格中的部分，在日历控件部分代码的最后面，有三个for循环，用来控制上个月当前月和下个月日期，其中第二个循环是当前月（日历标题部分选择的月份）控制部分。

代码如下：

			for(; i < startingPos; ) {
				var tempId = "fruit"+i;
				d.setDate(d.getDate()+1);
				var fvalue = d.dateFormat(format);
				textEls[i].innerHTML = '<div align="center"><font size ="2" color = "#8B8378" >'+(++prevStart)+'</font>'+'<br></div>';
				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;	// 设置这个ID是为了让每个单元格中保存当前日期唯一的ID，如果直接使用fvalue的话，获取的会是这个月最后一天对应的值

				var config = new Ext.Button({
					text: '设置',
					id: comboId,
					border: false,
					handler : function(edt,e) {
						var dateStrConfig = edt.id.substring(5,15);
						/** 按钮处理事件 */
					}
				});

				/** 单元格中显示内容 */
				textEls[i].innerHTML = '<div align="center"><font size ="2">'+(intDay)+'</font>'+'<br><div id="'+divId+'" align="center"></div></div>';
				config.render(divId);	// 将我们自己定义的按钮放到单元格中(渲染)

				cells[i].className = 'x-date-active';
				setCellClass(this, cells[i]);
				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 = '<div align="center"><font size ="2" color = "#8B8378">'+(++extraDays)+'</font>'+'<br></div>';
				cells[i].className = 'x-date-nextday';
				setCellClass(this, cells[i]);
				i = i + 1;
			}