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的原型继承
Jul 25 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
p5.js入门教程之图片加载
Mar 20 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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脚本的10个技巧(8)
2006/10/09 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
解析isset与is_null的区别
2013/08/09 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
常用DOM整理
2015/06/16 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python使用Matplotlib画饼图
2018/09/25 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
python实现大文本文件分割
2019/07/22 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
UNIX命令速查表
2012/03/10 面试题
思想政治自我鉴定
2013/10/06 职场文书
给校长的一封建议书
2014/03/12 职场文书
员工团队活动方案
2014/08/28 职场文书
优秀班主任申报材料
2014/12/16 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
高校教师个人总结
2015/02/10 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS