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 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
详解Typescript里的This的使用方法
Jan 08 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防注入安全代码
2008/04/09 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
Python用GET方法上传文件
2015/03/10 Python
python实现图像识别功能
2018/01/29 Python
python线程池threadpool使用篇
2018/04/27 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
Java的基础面试题附答案
2016/01/10 面试题
电焊工工作岗位职责
2014/02/06 职场文书
2014年团队工作总结
2014/11/24 职场文书
考研导师推荐信范文
2015/03/27 职场文书
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers