Ext JS 4实现带week(星期)的日期选择控件(实战一)


Posted in Javascript onAugust 21, 2013

前言

Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有)。
Ext JS 4实现带week(星期)的日期选择控件(实战一) 

但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周。

遗憾的是Ext js 并没有提供这样的配置。

(针对Ext js 4来说,理想的相法是在Ext.picker.Date有一个 类似showWeek这样的配置项)

现有的解法

到网络上去看看基于Ext js 的解法:有找到两个

http://enikao.net/extjs/weeknumber/weeknumber.html

http://www.lubber.de/extjs/datepickerplus/

第一种解法在IE上work, 在其他浏览器上显示不出来, 直接忽视。

第二种解法支持 Ext js 2 和 Ext js 3 版本,但是不支持Ext js 4。凭着个人在Ext js 升级上的一些经验,一开始觉得把这个扩展升级到Ext js 4应该没有什么问题。鼓捣了半天,放弃了。 Ext js 3 升级到Ext js 4后, 日期页面的显示元素也做了修改, 旧版本用 tr td 居多,新版本中多了一些 div 和 a 元素。而且class 的名字也换掉了。这样看起来,升级阻力较大。只能自己来实现这个扩展了。

Ext JS 4 日期控件扩展

先贴上代码:

/********************************* 
* @author: oscar999 
* @Description: New Widgets Extend from Ext 
* @verion: V1.0 
**********************************/ /** 
* Date Picker with Week 
*/ 
Ext.define('Ext.ux.DatePickerWithWeek',{ 
extend: "Ext.picker.Date", 
alias : "widget.datepickerwithweek", 
width: 197, 
numWeeks: 6, 
renderTpl:[ 
'<div id="{id}-innerEl" role="grid">', 
'<div role="presentation" class="{baseCls}-header">', 
'<a id="{id}-prevEl" class="{baseCls}-prev {baseCls}-arrow" href="#" role="button" title="{prevText}" hidefocus="on" ></a>', 
'<div class="{baseCls}-month" id="{id}-middleBtnEl">{%this.renderMonthBtn(values, out)%}</div>', 
'<a id="{id}-nextEl" class="{baseCls}-next {baseCls}-arrow" href="#" role="button" title="{nextText}" hidefocus="on" ></a>', 
'</div>', 
'<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="grid">', 
'<thead role="presentation"><tr role="row">', 
'<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">', 
'<div class="{parent.baseCls}-column-header-inner">Wk</div>', 
'</th>', 
'<tpl for="dayNames">', 
'<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">', 
'<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>', 
'</th>', 
'</tpl>', 
'</tr></thead>', 
'<tbody role="presentation"><tr role="row">', 
'<tpl for="days">', 
'{#:this.isEndOfWeek}', 
'{#:this.isBeginOfWeek}', 
'<td role="gridcell" id="{[Ext.id()]}">', 
'<a role="presentation" hidefocus="on" class="{parent.baseCls}-date" href="#"></a>', 
'</td>', 
'</tpl>', 
'</tr></tbody>', 
'</table>', 
'<tpl if="showToday">', 
'<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>', 
'</tpl>', 
'</div>', 
{ 
firstInitial: function(value) { 
//alert(value); 
return Ext.picker.Date.prototype.getDayInitial(value); 
}, 
isBeginOfWeek: function(value){ 
//value--; 
//value--; 
var end = (value === 1 || (value-1)%7 === 0); 
return end ? '<td role="weekcell" id="{[Ext.id()]}"><a role="presentation"></a></td>' : ''; 
}, 
isEndOfWeek: function(value) { 
value--; 
var end = value % 7 === 0 && value !== 0; 
return end ? '</tr><tr role="row">' : ''; 
}, 
renderTodayBtn: function(values, out) { 
Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out); 
}, 
renderMonthBtn: function(values, out) { 
Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out); 
} 
} 
], 
fullUpdate: function(date){ 
this.callParent([date]); 
var me = this; 
var weekNodes = me.weekNodes; 
var curWeekStart = Ext.Date.clearTime(new Date(date.getFullYear(), date.getMonth(), 1)); 
var begMonWeek = Ext.Date.getWeekOfYear(curWeekStart); 
var firstDayOfMonth = Ext.Date.getFirstDayOfMonth(curWeekStart); 
if(firstDayOfMonth===0) 
{ 
begMonWeek +=1; 
} 
for(j=0;j<me.numWeeks;j++) 
{ 
weekNodes[j].innerHTML = begMonWeek.toString(); 
begMonWeek++; 
} 
}, 
onRender : function(container, position){ 
var me = this; 
me.callParent(arguments); 
me.cells = me.eventEl.select('tbody td[role="gridcell"]'); 
me.textNodes = me.eventEl.query('tbody td[role="gridcell"] a'); 
//begin extend 
me.weekcells= me.eventEl.select('tbody td[role="weekcell"]'); 
me.weekNodes= me.eventEl.query('tbody td[role="weekcell"] a'); 
//end extend 
me.mon(me.eventEl, { 
scope: me, 
mousewheel: me.handleMouseWheel, 
click: { 
//fn: me.handleDateClick, 
fn: function(){}, 
delegate: 'a.' + me.baseCls + '-date' 
} 
}); 
} 
/*,initComponent: function(){ 
this.callParent(); 
}*/ 
}); 
/* 
* Date Form field use Date Picker with Week 
*/ 
Ext.define('Ext.ux.DateFieldWithWeek',{ 
extend: "Ext.form.field.Date", 
alias : "widget.datefieldwithweek", 
/*initComponent: function(){ 
this.callParent(); 
},*/ 
createPicker : function(){ 
var me = this 
format = Ext.String.format; 
return new Ext.ux.DatePickerWithWeek({ 
pickerField: me, 
ownerCt: me.ownerCt, 
renderTo: document.body, 
floating: true, 
hidden: true, 
focusOnShow: true, 
minDate: me.minValue, 
maxDate: me.maxValue, 
disabledDatesRE: me.disabledDatesRE, 
disabledDatesText: me.disabledDatesText, 
disabledDays: me.disabledDays, 
disabledDaysText: me.disabledDaysText, 
format: me.format, 
showToday: me.showToday, 
startDay: me.startDay, 
minText: format(me.minText, me.formatDate(me.minValue)), 
maxText: format(me.maxText, me.formatDate(me.maxValue)), 
listeners: { 
scope: me, 
select: me.onSelect 
}, 
keyNavConfig: { 
esc: function() { 
me.collapse(); 
} 
} 
}); 
} 
});

原理很简单:

1. 改写 renderTpl, 增加星期显示的列

2. 改写fullUpdate, 设置星期的值。 Ext 有提供getWeekOfYear这个方法可以获取星期

3. onRender。 这里需要特别注意的就是click 中的fn: me.handleDateClick 要给一个空函数,否则选日期的时候会执行两次。

Javascript 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
js 匿名调用实现代码
Jun 19 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 #Javascript
jquery设置控件位置的方法
Aug 21 #Javascript
获取表单控件原始(初始)值的方法
Aug 21 #Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 #Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 #Javascript
jquery ready(fn)事件使用介绍
Aug 21 #Javascript
javaScript面向对象继承方法经典实现
Aug 20 #Javascript
You might like
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
《与孩子一起学编程》python自测题
2018/05/27 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
numpy返回array中元素的index方法
2018/06/27 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
python 表格打印代码实例解析
2019/10/12 Python
Python面向对象封装操作案例详解
2019/12/31 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
职业生涯规划书怎么写?
2014/09/14 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
基于Python实现将列表数据生成折线图
2022/03/23 Python