ExtJs3版本封装年月控件
2014-07-01 16:55
281 查看
MonthField.js
使用MonthField控件
效果图如下
Ext.ns('Ext.ux.form'); Ext.ux.MonthPicker=Ext.extend(Ext.Component,{ format:"M-y", okText:Ext.DatePicker.prototype.okText, cancelText:Ext.DatePicker.prototype.cancelText, constrainToViewport:true, monthNames:Date.monthNames, startDay:0, value:0, noPastYears:false, initComponent:function () { Ext.ux.MonthPicker.superclass.initComponent.call(this); this.value=this.value? this.value.clearTime():new Date().clearTime(); this.addEvents( 'select' ); if(this.handler) { this.on("select",this.handler,this.scope||this); } }, focus:function () { if(this.el) { this.update(this.activeDate); } }, onRender:function (container,position) { var m=['<div style="width: 200px; height:175px;"></div>'] m[m.length]='<div class="x-date-mp"></div>'; var el=document.createElement("div"); el.className="x-date-picker"; el.innerHTML=m.join(""); container.dom.insertBefore(el,position); this.el=Ext.get(el); this.monthPicker=this.el.down('div.x-date-mp'); this.monthPicker.enableDisplayMode('block'); this.el.unselectable(); this.showMonthPicker(); if(Ext.isIE) { this.el.repaint(); } this.update(this.value); }, createMonthPicker:function () { if(!this.monthPicker.dom.firstChild) { var buf=['<table border="0" cellspacing="0">']; for(var i=0;i<6;i++) { buf.push( '<tr><td class="x-date-mp-month"><a href="#">',this.monthNames[i].substr(0,3),'</a></td>', '<td class="x-date-mp-month x-date-mp-sep"><a href="#">',this.monthNames[i+6].substr(0,3),'</a></td>', i==0? '<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>': '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>' ); } buf.push( '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">', this.okText, '</button><button type="button" class="x-date-mp-cancel">', this.cancelText, '</button></td></tr>', '</table>' ); this.monthPicker.update(buf.join('')); this.monthPicker.on('click',this.onMonthClick,this); this.monthPicker.on('dblclick',this.onMonthDblClick,this); this.mpMonths=this.monthPicker.select('td.x-date-mp-month'); this.mpYears=this.monthPicker.select('td.x-date-mp-year'); this.mpMonths.each(function (m,a,i) { i+=1; if((i%2)==0) { m.dom.xmonth=5+Math.round(i*.5); }else { m.dom.xmonth=Math.round((i-1)*.5); } }); } }, showMonthPicker:function () { this.createMonthPicker(); var size=this.el.getSize(); this.monthPicker.setSize(size); this.monthPicker.child('table').setSize(size); this.mpSelMonth=(this.activeDate||this.value).getMonth(); this.updateMPMonth(this.mpSelMonth); this.mpSelYear=(this.activeDate||this.value).getFullYear(); this.updateMPYear(this.mpSelYear); this.monthPicker.show(); //this.monthPicker.slideIn('t', {duration:.2}); }, updateMPYear:function (y) { if(this.noPastYears) { var minYear=new Date().getFullYear(); if(y<(minYear+4)) { y=minYear+4; } } this.mpyear=y; var ys=this.mpYears.elements; for(var i=1;i<=10;i++) { var td=ys[i-1],y2; if((i%2)==0) { y2=y+Math.round(i*.5); td.firstChild.innerHTML=y2; td.xyear=y2; }else { y2=y-(5-Math.round(i*.5)); td.firstChild.innerHTML=y2; td.xyear=y2; } this.mpYears.item(i-1)[y2==this.mpSelYear?'addClass':'removeClass']('x-date-mp-sel'); } }, updateMPMonth:function (sm) { this.mpMonths.each(function (m,a,i) { m[m.dom.xmonth==sm?'addClass':'removeClass']('x-date-mp-sel'); }); }, selectMPMonth:function (m) { }, onMonthClick:function (e,t) { e.stopEvent(); var el=new Ext.Element(t),pn; if(el.is('button.x-date-mp-cancel')) { this.hideMonthPicker(); //this.fireEvent("select", this, this.value); } else if(el.is('button.x-date-mp-ok')) { this.update(new Date(this.mpSelYear,this.mpSelMonth,(this.activeDate||this.value).getDate())); //this.hideMonthPicker(); this.fireEvent("select",this,this.value); } else if(pn=el.up('td.x-date-mp-month',2)) { this.mpMonths.removeClass('x-date-mp-sel'); pn.addClass('x-date-mp-sel'); this.mpSelMonth=pn.dom.xmonth; } else if(pn=el.up('td.x-date-mp-year',2)) { this.mpYears.removeClass('x-date-mp-sel'); pn.addClass('x-date-mp-sel'); this.mpSelYear=pn.dom.xyear; } else if(el.is('a.x-date-mp-prev')) { this.updateMPYear(this.mpyear-10); } else if(el.is('a.x-date-mp-next')) { this.updateMPYear(this.mpyear+10); } }, onMonthDblClick:function (e,t) { e.stopEvent(); var el=new Ext.Element(t),pn; if(pn=el.up('td.x-date-mp-month',2)) { this.update(new Date(this.mpSelYear,pn.dom.xmonth,(this.activeDate||this.value).getDate())); //this.hideMonthPicker(); this.fireEvent("select",this,this.value); } else if(pn=el.up('td.x-date-mp-year',2)) { this.update(new Date(pn.dom.xyear,this.mpSelMonth,(this.activeDate||this.value).getDate())); //this.hideMonthPicker(); this.fireEvent("select",this,this.value); } }, hideMonthPicker:function (disableAnim) { Ext.menu.MenuMgr.hideAll(); }, showPrevMonth:function (e) { this.update(this.activeDate.add("mo",-1)); }, showNextMonth:function (e) { this.update(this.activeDate.add("mo",1)); }, showPrevYear:function () { this.update(this.activeDate.add("y",-1)); }, showNextYear:function () { this.update(this.activeDate.add("y",1)); }, update:function (date) { this.activeDate=date; this.value=date; if(!this.internalRender) { var main=this.el.dom.firstChild; var w=main.offsetWidth; this.el.setWidth(w+this.el.getBorderWidth("lr")); Ext.fly(main).setWidth(w); this.internalRender=true; if(Ext.isOpera&&!this.secondPass) { main.rows[0].cells[1].style.width=(w-(main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth))+"px"; this.secondPass=true; this.update.defer(10,this,[date]); } } } }); Ext.reg('monthpicker',Ext.ux.MonthPicker); if (parseInt(Ext.version.substr(0, 1), 10) > 2) { Ext.ux.MonthItem = Ext.ux.MonthPicker; Ext.override(Ext.menu.DateMenu, { initComponent: function(){ this.on('beforeshow', this.onBeforeShow, this); if (this.strict = (Ext.isIE7 && Ext.isStrict)) { this.on('show', this.onShow, this, { single: true, delay: 20 }); } Ext.apply(this, { plain: true, showSeparator: false, items: this.picker = new Ext.DatePicker(Ext.apply({ internalRender: this.strict || !Ext.isIE, ctCls: 'x-menu-date-item' }, this.initialConfig)) }); Ext.menu.DateMenu.superclass.initComponent.call(this); this.relayEvents(this.picker, ["select"]); this.on('select', this.menuHide, this); if (this.handler) { this.on('select', this.handler, this.scope || this); } } }); } else { Ext.ux.MonthItem=function (config) { Ext.ux.MonthItem.superclass.constructor.call(this,new Ext.ux.MonthPicker(config),config); this.picker=this.component; this.addEvents('select'); this.picker.on("render",function (picker) { picker.getEl().swallowEvent("click"); picker.container.addClass("x-menu-date-item"); }); this.picker.on("select",this.onSelect,this); }; Ext.extend(Ext.ux.MonthItem, Ext.menu.DateMenu, { onSelect:function (picker,date) { this.fireEvent("select",this,date,picker); Ext.ux.MonthItem.superclass.handleClick.call(this); } }); } Ext.ux.MonthMenu = function (config) { Ext.ux.MonthMenu.superclass.constructor.call(this,config); this.plain=true; var mi=new Ext.ux.MonthItem(config); this.add(mi); // this.picker=mi; this.picker=mi.picker; this.relayEvents(mi,["select"]); }; Ext.extend(Ext.ux.MonthMenu,Ext.menu.Menu,{ cls:'x-date-menu' }); Ext.ux.MonthField = Ext.extend(Ext.form.DateField,{ format:"Y-m", triggerClass:"x-form-date-trigger", defaultAutoCreate: { tag: "input", type: "text", size: "20", autocomplete: "off" }, menuListeners:{ select:function (m,d) { this.setValue(d.format(this.format)); }, show:function () { this.onFocus(); }, hide:function () { this.focus.defer(10,this); var ml=this.menuListeners; this.menu.un("select",ml.select,this); this.menu.un("show",ml.show,this); this.menu.un("hide",ml.hide,this); } }, initComponent: function(){ Ext.ux.MonthField.superclass.initComponent.call(this); this.afterMethod('afterRender', function(){ this.getEl().applyStyles('top:0'); }); }, getValue: function(){ return this.parseDate(Ext.ux.MonthField.superclass.getValue.call(this)) || ''; }, onTriggerClick:function () { if(this.disabled) { return ; } if(this.menu==null) { this.menu=new Ext.ux.MonthMenu(); } Ext.apply(this.menu.picker,{ }); if (this.menuEvents) { this.menuEvents('on'); } else { this.menu.on(Ext.apply({}, this.menuListeners, { scope: this })); } this.menu.show(this.el,"tl-bl?"); } }); Ext.reg("monthfield",Ext.ux.MonthField);
使用MonthField控件
new Ext.ux.MonthField({ fieldLabel : '开始月份', name: 'startTime', allowBlank : false, anchor : '95%', format:'Y-m', editable : false, value : defaultTime })
效果图如下
相关文章推荐
- ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ](2)
- Extjs DateField控件-改写只选年月
- ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ]
- ExtJs4 日期 年月选择控件
- Extjs之常用控件要封装
- ExtJs ItemSelector控件的一个版本问题
- 关于extJS3.2版本中设置datefield控件和combo控件等只读的问题
- ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ]
- ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ]
- ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ] (1)
- Extjs 只显示年月的控件
- ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ]
- extjs时间控件,仅在选择年月时的一处小bug
- 对.NET默认控件的封装(已更新)
- 控件对象字符串生成程序 2.1 升级版本 一句话:太方便了
- 封装了NPTL自由软件基石Glibc 发布2.4版本
- 一个封装的QQ面板控件(HTC)
- 用控件仅一条指令实现界面换肤和多语言版本(VB)
- 不同版本的控件在同一个项目中能否一起使用
- 客户端拖动控件封装(让拖动变得更简单)