extjs2日期控件扩展

1、extjs4.2日期控件扩展目标Extjs4日期控件，带年月日时分秒，效果图如下:201M年12月B_ 二三四=六123斗5678g101112131415161718叵202122232斗25262728293031J1122y:55人 yj *42*7确定规在调用方法：xtype : Zc_form_DatetimeField实现DateTimeField.js* Description* author*/Ext.defi ne(exte nd: alias: requires:/*带时间的日期输入控件张川(cr10210206)'Ext.zc.form.DateTimeField

2、' 'Ext.form.field.Date','widget.zc_form_DatetimeField','Ext.zc.form.DateTimePicker'/* cfg* The localizati on* according*/format :Stri ng default support. toformatdate formatstringThe formatmustli nk Ext.Date#parse"Y-m-d H:i:s"bewhich can be override n for valid/

3、* cfg StringaltFormatsa user* Multiple date formats separated by "|" to try when parsing in put value and it does not match the defi ned* format.*/altFormats :"Y-m-d H:i:s" ,createPicker:fun ctio n() var me = this ,format = Ext.Stri ng.format;/修改picker为自定义pickerreturn Ext.create(

4、 'Ext.zc.form.DateTimePicker',pickerField: me, own erCt: me.ow nerCt, ren derTo: docume nt.body, floating:true ,hidden:true ,focus On Show:true ,mi nDate: me.mi nV alue, maxDate: me.maxValue, disabledDatesRE: me.disabledDatesRE, disabledDatesText: me.disabledDatesText, disabledDays: me.disab

5、ledDays, disabledDaysText: me.disabledDaysText, format: me.format, showToday: me.showToday, startDay: me.startDay, min Text: format(me.mi nText, me.formatDate(me.mi nV alue), maxText: format(me.maxText, me.formatDate(me.maxValue), liste ners: scope: me, select: me. on Select, keyNavCo nfig: esc:func

6、tion () me.collapse(););,private*/on Expa nd:fun cti on() var value =this .getValue();true ););/多传一个参数，从而避免时分秒被忽略。this .picker.setValue(Ext.isDate(value) ? value :new Date(),DateTimePicker.js/*Descripti on* author */Ext.defi ne( exte nd: alias: okText: okTip: todayText : todayTip :带时间选择的日历选择器张川(cr10

7、210206)'Ext.zc.form.DateTimePicker''Ext.picker.Date' , / 继承于'widget.zc_form_DateTimePicker''确定',/确认按钮文字描述 确定，/确认按钮提示内容'现在',/现在按钮文字描述 '现在',/现在按钮文字描述,Ext.picker.Date,/别名ren derTpl:'<div id="id-i nn erEl" role="grid">',&#

8、39;<div role="prese ntatio n" class="baseCls-header">' '<aid="id-prevEl"href="#"role="butt on"baseCls-arrow" hidefocus="on" ></a>''<divclass="baseCls-prev title="prevText"class="

9、baseCls-mo nth" id="id-middleBtnEl">%this.renderMonthBtn(values, out)%</div>' class="baseCls- next title=" nextText"'<abaseCls-arrow" hidefocus="on" ></a>''</div>''<tableid="id- nextEI"href=&

10、quot;#"role="butt on"id="id-eve ntEl" cellspac in g="0" role="prese ntati on">''<theadrole="prese ntati on">',class="baseCls-i nner"role="prese ntati on">vtrrole="colu mn header"'<tpl

11、for="dayNames">' , '<thclass="pare nt.baseCls-colum n-header" title=".">''<divclass="pare nt.baseCls-colu mn-header-i nn er">.:this.first In itial</ div>','v/th>','v/tpl>' ,'v/tr>v/thead>

12、' ,'vtbodyrole="prese ntati on"> <trrole="prese ntati on">','vtpl for="days">','#:this.isE ndOfWeek','vtd role="gridcell" id="Ext.id()">','<arole="prese ntati on"hidefocus="on&q

13、uot;class="pare nt.baseCls-date" href="#">v/a>','v/td>','v/tpl>' ,'v/tr>v/tbody>' ,'v/table>' ,/指定时分秒渲染框架'vtableid="id-timeEl"style="table-layout:auto;width:auto;marg in:03px;"class="x-datepicke

14、r-i nner" cellspaci ng="0">','vtbody>vtr>' ,'vtd>%this.re nderHourBt n(values,out)%v/td>','vtd>%this.re nderMi nu teBt n(values,out)%v/td>','vtd>%this.re nderSeco ndBt n(values,out)%v/td>','v/tr>v/tbody>' ,&#

15、39;v/table>' ,'vtpl if="showToday">',/添加一个确认按钮渲染'vdivid="id-footerEl"role="prese ntati on"class="baseCls-footer">%this.re nderOkBt n(values,out)%this.re nderTodayBt n(values, out)%v/div>','v/tpl>' ,'v/div>'

16、,firstI nitial:function (value) returnExt.picker.Dtotype.getDay In itial(value);,isE ndOfWeek:fun ctio n (value) / con vert from 1 based in dex to 0 based/ by decreme nti ng value once.value-;var end = value % 7 = 0 && value != 0;return end ? 'v/tr>vtr role="row">&

17、#39;:” ；,ren derTodayBt n:fun cti on(values, out) Ext.DomHelper.ge nerateMarkup(values.$comp.todayBt n. getRe nderTree(), out);,ren derM on thBt n:fun cti on(values, out) Ext.DomHelper.ge nerateMarkup(values.$comp.m on thBt n. getRe nderTree(), out);,/指定渲染方法调用ren derHourBt n:fun cti on (values, out)

18、 Ext.DomHelper.ge nerateMarkup(values.$comp.hourBt n. getRe nderTree(),out); /根据组件获得组件的html输出,ren derM inu teBt n:function (values, out) Ext.DomHelper.ge nerateMarkup(values.$comp.mi nu teBt n.getRe nderTree(), out);,ren derSec on dBt n:function (values, out) Ext.DomHelper.ge nerateMarkup(values.$co

19、mp.sec on dBt n. getRe nderTree(), out);,ren derOkBt n:fun cti on(values, out) Ext.DomHelper.ge nerateMarkup(values.$comp.okBt n. getRe nderTree(), out);,beforeRe nder:function () var me = this ,_$Number=Ext.form.field.Number;/在组件渲染之前，将自定义添加的时、分、秒和确认按钮进行初始化/组件宽度可能需要调整下，根据使用的theme不同，宽度需要调整me.hourBt n

20、=new _$Number(min Value:。，maxValue:23,step:1,width:49)；me.mi nu teBt n= min Value:。， maxValue:59, step:1, width:57, labelWidth:5, fieldLabel:);me.sec on dBt n= min Value:。， maxValue:59, step:1, width:57, labelWidth:5, fieldLabel:)；new _$Number('&nbsp;'/在组件之前渲染new _$Number('&nbsp;

21、'/在组件之前渲染me.okBtn =new Ext.butto n.Butt on(own erCt: me,own erLayout: me.getComp onen tLayout(),text: me.okText,tooltip: me.okTip,tooltipType:'title' ,handler:me.okHandler,/确认按钮的事件委托scope: me)；me.callPare nt();,fini shRe nderChildre n:function () var me = this ;，从而获得事件绑定II组件渲染完成后，需要调用子元素

22、的finishRenderme.hourBt n.fini shRe nder();me.mi nu teBt n.fin ishRe nder();me.sec on dBt n.fini shRe nder();me.okBt n.fin ishRe nder(); me.callPare nt();,*确认按钮触发的调用*II*okHa ndler :function ()var me = this , btn = me.okBt n;if (btn && !btn.disabled)me.setValue(this .getValue();me.fireEve nt(&

23、#39;select' , me, me.value);me.o nSelect();return me;,/*覆盖了父类的方法,因为父类中是根据时间的getTime判断的，因此需要对时、分、秒分别值为0才能保证当前值的日期选择* private* param Date date The new date*/selectedUpdate:fun ctio n(date)true );*/this .callParent(Ext.Date.clearTime(date, ,更新picker的显示内容，需要同时更新时、分、秒输入框的值privateparam Date date The new dateparam Boolean forceRefresh True to force a full refreshupdate :fun ctio n(date, fo