读书人

Ext dateField扩张 可单独选择年月,年

发布时间: 2012-10-06 17:34:01 作者: rapoo

Ext dateField扩展 可单独选择年月,年,月.可清空

?

效果图1:只选择年

Ext dateField扩张 可单独选择年月,年,月.可清空

Ext dateField扩张 可单独选择年月,年,月.可清空

效果图2:只显示月

Ext dateField扩张 可单独选择年月,年,月.可清空

Ext dateField扩张 可单独选择年月,年,月.可清空

效果图3:显示年月

Ext dateField扩张 可单独选择年月,年,月.可清空

Ext dateField扩张 可单独选择年月,年,月.可清空

代码如下:

/**
?* 超级时间选择控件:在原有时间控件功能上,新增了单独选择年/月,年,月的功能,清空时间功能
?* Ext-3.0.0
?* 用法:
?* <br><input type="text" name="dateField" id="dateField" />
?*???? new Ext.form.SuperDateField({
??? ??? ??? applyTo : 'dateField',
??? ??? ??? format:'Y'
??? ??? });
?? <br>重要参数说明:
?? format
???????? <br>1:当时间格式参数中不含'd',则只显示年月选择面板。如:'Y-m','Y年m月'
???????? <br>2:当时间格式参数中不含'd','m',并以'Y'开头,则只显示年份选择面板。如:'Y','Y年'
???????? <br>3:当时间格式参数中不含'd','Y',并以'm'开头,则只显示月份选择面板。如:'m','m月'
???????? <br>4:当时间格式参数中包含'd',则和普通时间控件一样
?* @author DuanYong
?* @since 2011-07-08
?* @version 2.0
?* @class Ext.form.SuperDateField
?* @extends Ext.form.DateField
?*/
Ext.form.SuperDateField = Ext.extend(Ext.form.DateField, {
??? ??? ??? format : 'Y',
??? ??? ??? onTriggerClick : function() {
??? ??? ??? ??? Ext.form.SuperDateField.superclass.onTriggerClick.call(this);
??? ??? ??? ??? Ext.apply(this.menu.picker, {
??? ??? ??? ??? ??? ??? ??? input : this
??? ??? ??? ??? ??? ??? });
??? ??? ??? ??? // 当显示时间格式不含'd'时,直接调用showMonthPicker()显示年月选择面板
??? ??? ??? ??? if(this.format.indexOf('d') == -1){
??? ??? ??? ??? ??? this.menu.picker.showMonthPicker();
??? ??? ??? ??? }
??? ??? ??? }
??? ??? });
// 注册xtype
Ext.reg('superDateField', Ext.form.SuperDateField);
/**
?* 覆盖Ext.DatePicker部分方法,新增只显示年月,年,月选择面板功能
?* 注意:修改方法时需注意不要影响正常时间控件功能
?*/
Ext.override(Ext.DatePicker, {
??? clearText:'清空',
??? onRender : function(container, position) {
??? ??? var m = [
??? ??? ??? ??? '<table cellspacing="0">',
??? ??? ??? ??? '<tr><td title="',
??? ??? ??? ??? this.prevText,
??? ??? ??? ??? '"> </a></td><td align="center"></td><td title="',
??? ??? ??? ??? this.nextText, '"> </a></td></tr>',
??? ??? ??? ??? '<tr><td colspan="3"><table cellspacing="0"><thead><tr>'], dn = this.dayNames, i;
??? ??? for (i = 0; i < 7; i++) {
??? ??? ??? var d = this.startDay + i;
??? ??? ??? if (d > 6) {
??? ??? ??? ??? d = d - 7;
??? ??? ??? }
??? ??? ??? m.push('<th><span>', dn[d].substr(0, 1), '</span></th>');
??? ??? }
??? ??? m[m.length] = '</tr></thead><tbody><tr>';
??? ??? for (i = 0; i < 42; i++) {
??? ??? ??? if (i % 7 === 0 && i !== 0) {
??? ??? ??? ??? m[m.length] = '</tr><tr>';
??? ??? ??? }
??? ??? ??? m[m.length] = '<td><a href="#" hidefocus="on" tabIndex="1"><em><span></span></em></a></td>';
??? ??? }
??? ??? m.push('</tr></tbody></table></td></tr>',
??? ??? '<tr><td colspan="3" align="center"><table><tr>',
??? ??? ??? ??? ??? ??? ?this.showToday ?'<td cellspacing="0">'];
??? ??? ??? //只保留选择年份面板
??? ??? ??? if(this.format.indexOf('d') == -1 && this.format.indexOf('Y') == 0 && this.format.indexOf('m') == -1){
??? ??? ??? ??? for (var i = 0; i < 6; i++) {
??? ??? ??? ??? ??? buf.push(i === 0 ? '<td align="center"><a align="center"><a align="center"><a align="center"><a /> 报错了
网页错误详细信息


消息: 'undefined' 为空或不是对象
行: 375
字符: 3
代码: 0
URI: http://10.188.180.128:8088/tms/jsp/intsale/when/SuperDateField.js


2 楼 javacoo 2011-07-19 你提供的错误信息不够啊,无法判断错在哪。 3 楼 pjg1989 2011-08-15 this.cells.elements 为空或者不是对象 386行... 怎么解决 ? 4 楼 lanlan85525 2012-02-08 和一楼一样的问题。 5 楼 lanlan85525 2012-02-08 this.cells.elements 为空或者不是对象 6 楼 zhhandlwy 2012-05-29 lanlan85525 写道this.cells.elements 为空或者不是对象
7 楼 memory_sky1 2012-06-16 我也出现这个 this.cells.elements 为空或者不是对象 8 楼 andywangqin 2012-06-26 this.cells.elements 为空或者不是对象,怎么解决? 9 楼 lytwjm 2012-08-20 this.cells.elements 为空或者不是对象,怎么解决?

读书人网 >Web前端

热点推荐