extjs4.2 日期控件扩展

extjs4.2 日期控件扩展

目标

Extjs4 日期控件，带年月日时分秒，效果图如下：

调用方法：

xtype

: ‘

zc_form_DatetimeField

’

实现

/**

* @Description 带时间的日期输入控件

* @author 张川(cr10210206@)

*/

('meField', {

extend:'',

alias: '_form_DatetimeField',

requires: ['mePicker'],

/**

* @cfg {String} format

* The default date format string which can be overriden for

localization support. The format must be valid

* according to {@link #parse}.

*/

format : "Y-m-d H:i:s",

/**

* @cfg {String} altFormats

* Multiple date formats separated by "|" to try when parsing a user

input value and it does not match the defined

* format.

*/

altFormats : "Y-m-d H:i:s",

createPicker: function() {

var me = this,

format = ;

//修改picker为自定义picker

return ('mePicker',{

pickerField: me,

ownerCt: t,

renderTo: ,

floating: true,

hidden: true,

focusOnShow: true,

minDate: ue,

maxDate: ue,

disabledDatesRE: edDatesRE,

disabledDatesText: edDatesText,

disabledDays: edDays,

disabledDaysText: edDaysText,

format: ,

showToday: day,

startDay: ay,

minText: format(t, Date(ue)),

maxText: format(t, Date(ue)),

listeners: {

scope: me,

select: ct

},

keyNavConfig: {

esc: function() {

se();

}

}

});

},

/**

* @private

*/

onExpand: function() {

var value = ue();

//多传一个参数，从而避免时分秒被忽略。

ue((value) ? value : new Date(),

true);

}

});

/**

* @Description 带时间选择的日历选择器

* @author 张川(cr10210206@)

*/

('mePicker', {

extend: '',//继承于

alias: '_form_DateTimePicker',//别名

okText:'确定',//确认按钮文字描述

okTip:'确定',//确认按钮提示内容

todayText : '现在',//现在按钮文字描述

todayTip : '现在',//现在按钮文字描述

renderTpl: [

'

{

firstInitial: function(value) {

return

Initial(value);

},

isEndOfWeek: function(value) {

// convert from 1 based index to 0 based

// by decrementing value once.

value--;

var end = value % 7 === 0 && value !== 0;

return end ? '' : '';

},

renderTodayBtn: function(values, out) {

teMarkup(values.$derTree(),

out);

},

renderMonthBtn: function(values, out) {

teMarkup(values.$derTree(),

out);

},

//指定渲染方法调用

renderHourBtn: function(values, out) {

teMarkup(values.$derTree(),

out);//根据组件获得组件的html输出

},

renderMinuteBtn: function(values, out) {

teMarkup(values.$derTree(),

out);

},

renderSecondBtn: function(values, out) {

teMarkup(values.$derTree(),

out);

},

renderOkBtn: function(values, out) {

teMarkup(values.$derTree(),

out);

}

}

],

beforeRender: function () {

var me = this,_$Number=;

//在组件渲染之前，将自定义添加的时、分、秒和确认按钮进行初始化

//组件宽度可能需要调整下，根据使用的theme不同，宽度需要调整

n=new _$Number({

minValue:0,

maxValue:23,

step:1,

width:49

});

Btn=new _$Number({

minValue:0,

maxValue:59,

step:1,

width:57,

labelWidth:5,

fieldLabel:' '//在组件之前渲染 ':'

});

Btn=new _$Number({

minValue:0,

maxValue:59,

step:1,

width:57,

labelWidth:5,

fieldLabel:' '//在组件之前渲染 ':'

});

= new ({

ownerCt: me,

ownerLayout: ponentLayout(),

text: ,

tooltip: ,

tooltipType:'title',

handler:ler,//确认按钮的事件委托

scope: me

});

rent();

},

finishRenderChildren: function () {

var me = this;

//组件渲染完成后，需要调用子元素的finishRender，从而获得事件绑定

Render();

Render();

Render();

Render();

rent();

},

/**

* 确认 按钮触发的调用

*/

okHandler : function(){

var me = this,

btn = ;

if(btn && !ed){

ue(ue());

ent('select', me, );

ct();

}

return me;

},

/**

* 覆盖了父类的方法，因为父类中是根据时间的getTime判断的，因此需要对时、

分、秒分别值为0才能保证当前值的日期选择

* @private

* @param {Date} date The new date

*/

selectedUpdate: function(date){

rent([ime(date,true)]);

},

/**

* 更新picker的显示内容，需要同时更新时、分、秒输入框的值

* @private

* @param {Date} date The new date

* @param {Boolean} forceRefresh True to force a full refresh

*/

update : function(date, forceRefresh){

var me = this;

ue(rs());

ue(utes());

ue(onds());

return rent(arguments);

},

/**

* 从picker选中后，赋值时，需要从时、分、秒也获得当前值

* datetimefield也会调用这个方法对picker初始化，因此添加一个isfixed

参数。

* @param {Date} date The new date

* @param {Boolean} isfixed True 时，忽略从时分秒中获取值

*/

setValue : function(date, isfixed){

var me = this;

if(isfixed!==true){

rs(ue());

utes(ue());

onds(ue());

}

=date;

();

return me;

},

// @private

// @inheritdoc

beforeDestroy : function() {

var me = this;

if (ed) {

//销毁组件时，也需要销毁自定义的控件

y(

n,

Btn,

Btn,

);

}

rent();

}

});