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

前言

Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有)。

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

遗憾的是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 要给一个空函数,否则选日期的时候会执行两次。

时间: 2013-08-20

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

前言 JavaScript 中的日期和时间 Ext JS 4实现带week(星期)的日期选择控件(实战一) 如对本篇的一些预备知识需详尽了解,可参考以上两篇. Javascript 有提供Date 对象用于处理时间.但是Date 并没有提供获取星期的方法. 要在web 端通过js 方式获取某个时间是这一年的第几个星期,可以根据一些算法去实现. 当然, jquery 的扩展组件 等有直接提供这样的一些现成包. 像Ext js 就有提供获取星期的方法 Ext.Date.getWeekOfYear(d

Winform之TextBox输入日期格式验证yyyy-mm-dd

复制代码 代码如下: private void button1_Click(object sender, EventArgs e)        {            string s = textBox1.Text.ToString();            bool b = ValidateDataTime(s);            string rs = "";            if (b)            {                rs = &qu

Extjs中DisplayField的日期或者数字格式化扩展

使用 Ext.form.FormPanel 来处理数据时候,某些字段是需要只读的.当然我们可以使用 Ext.form.TextField,然后设置成 ReadOnly,不过这样子的显示效果不是很好,因为始终会有个输入框.所以我们必须使用 Ext.form.DisplayField,但是 Ext.form.DisplayField 没有一个format的属性,也不具备 renderer 这个事件,比如日期字段 var form = new Ext.form.FormPanel({frame: tr

Ext JS框架中日期函数的用法及日期选择控件的实现

Ext.Date是一个单例,封装了一系列日期操作函数,扩展JavaScript Date的功能,下面列出一些常用的功能. 基本函数: Ext.Date.add(date, interval, value) 给date增加或减少时间,这个函数不改变原有Date对象的值,而是返回一个新的Date对象. Ext.Date.between(date, start, end) 判断date是否在start和end之间. Ext.Date.clearTime(date, clone) 把date的时间设置成

Extjs4如何处理后台json数据中日期和时间

当ASP.NET后台使用JavaScriptSerializer这个组件将对象序列化为json,或者使用ScriptMethod特性的json [ScriptMethod(ResponseFormat = ResponseFormat.Json), WebMethod(EnableSession = true)] public List<EUser> Users()//参数测试用 { List<EUser> l = new List<EUser>(); Random a

ASP.NET中TextBox使用Ajax控件显示日期不全的问题解决方法

正常的引用 复制代码 代码如下: <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="AjaxToolKit" %><asp:TextBox ID="txtRecordTime" runat="server" cssclass="style" width

C#中datagridview使用tooltip控件显示单元格内容的方法

本文实例讲述了C#中datagridview使用tooltip控件显示单元格内容的方法.分享给大家供大家参考,具体如下: 代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;

ASP.NET中 TextBox 文本输入框控件的使用方法

TextBox控件又称文本框控件,为用户提供输入文本的功能. 1.属性 TextBox控件的常用属性及说明如表1所示. 表1 TextBox控件常用属性及说明 属性 说明 AutoPostBack 获取或设置一个值,该值指示无论何时用户在TextBox控件中按〈Enter〉键或〈Tab〉键时,是否自动回发到服务器的操作 CausesValidation 获取或设置一个值,该值指示当TextBox控件设置为在回发发生时进行验证,是否执行验证 ID 控件ID Text 控件要显示的文本 TextMo

ASP.NET中Literal与Label控件的区别

一.方案和背景 Literal 控件表示用于向页面添加内容的几个选项之一.对于静态内容,无需使用容器,可以将标记作为 HTML 直接添加到页面中.但是,如果要动态添加内容,则必须将内容添加到容器中.典型的容器有 Label 控件.Literal 控件.Panel 控件和 PlaceHolder 控件. Literal 控件与 Label 控件的区别在于 Literal 控件不向文本中添加任何 HTML 元素.(Label 控件呈现一个 span 元素.)因此,Literal 控件不支持包括位置属

ASP.NET中 RadioButtonList 单选按钮组控件的使用方法

RadioButtonList 控件表示一个封装了一组单选按钮控件的列表控件. 可以使用两种类型的 ASP.NET 控件将单选按钮添加到网页上:各个 RadioButton 控件或一个 RadioButtonList 控件.这两类控件都允许用户从一小组互相排斥的预定义选项中进行选择.使用这些控件,可定义任意数目的带标签的单选按钮,并将它们水平或垂直排列. 一.常用属性 属性 值 作用 RepeatDirection Horizontal|Vertical 项的布局方向:水平方向|竖直风向 Rep

ASP.NET中 ListBox列表框控件的使用方法

ListBox 控件允许用户从预定义的列表中选择一个或多个项.它与 DropDownList 控件的不同之处在于,它不但可以一次显示多个项,而且(可选)还允许用户选择多个项. 一.属性 属性 值 作用 SelectionMode Single|Multiple 列表选择模式:单选|多选 Selected False|True 是否为选中状态 二.示例 ListBox.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup=&q

ASP.NET中ImageButton图片按钮控件的使用

ImageButton 说白了,就是一个能显示图片的按钮,用法和Button基本一致,无非就是点击之后触发事件,只是比Button展现更丰富一些. 一.常见 ImageButton 属性 属性 描述 ImageUrl 在 ImageButton 控件中显示的图像的路径. ToolTip 提示的文本. AlternateText 图像无法显示时显示的文本. 二.ImageButton实例演示 前台代码 ImageButton.aspx 复制代码 代码如下: <%@ Page Language=&quo

ASP.NET中HiddenField隐藏域控件的使用方法

HiddenField控件的作用简单的说是用于存储需要在向服务器的发送间保持的值.它作为 <input type= "hidden"/> 元素呈现,并且通过添加runat="server"就可以使它成为标准的HTML服务器控件.下面列出的是ASP.NET HiddenField Web服务器控件可以使用的属性和事件. 复制代码 代码如下: <asp:HiddenField     EnableTheming="True|False&quo

asp.net中TextBox只能输入数字的最简洁的两种方法

如下TextBox 复制代码 代码如下: <asp:textboxonkeypress="isnum()"id="TextBox1"runat="server"></asp:textbox> 1. 在页面中添加一段脚本: 复制代码 代码如下: <scriptlanguage="javascript">functionisnum(){if(event.keyCode<45||event.

ASP.NET 2.0/3.5中直接操作Gridview控件插入新记录

一.简介 从ASP.NET 2.0起引入了一批新的功能强大的视图控件,例如Gridview.FormView和DetailsView等等.通过和数据源控件的简单结合,在许多情况下,仅需要简单的配置方式就可以开发出功能强大的应用程序.但遗憾的是,Gridview控件中并没有提供像在FormView和DetailsView控件中那样直接插入新记录操作的支持.图1给出了典型的使用控件展示数据库数据的情形. 图1 使用GridView控件展示VS2005示例数据库Address表格中的数据熟悉Gridv