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 相关文章推荐
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
webpack file-loader和url-loader的区别
Jan 15 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
微信头像地址失效踩坑记附带解决方案
Sep 23 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
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
Python中的exec、eval使用实例
2014/09/23 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
简单了解django orm中介模型
2019/07/30 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
django配置app中的静态文件步骤
2020/03/27 Python
Python如何定义有默认参数的函数
2020/08/10 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
高中军训广播稿
2014/01/14 职场文书
法学自荐信
2014/06/20 职场文书
招标保密承诺书
2015/01/20 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript