Extjs DateField控制元件-改寫只選年月
呼叫程式碼一:
var monthField = new Ext.ux.MonthField({
id:'month',
fieldLabel: '月份',
allowBlank:false,
readOnly : true,
format:'Y年m月',
listeners:{"blur":function(){
alert()
}}
});
呼叫程式碼二(部分):
fieldLabel: '所屬日期', width : 150, xtype: 'monthfield', name: 'date', hiddenName : 'date', format: "Y-m", editable : false, value:new Date().dateFormat('Y-m'),
下面程式碼全複製做成一個monthPick.js就OK了,頁面匯入就可以像上面兩種使用方法使用
//monthPick.js //---------------- 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); 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.Adapter,{ 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.picker; this.relayEvents(mi,["select"]); }; Ext.extend(Ext.ux.MonthMenu,Ext.menu.Menu,{ cls:'x-date-menu' }); Ext.ux.MonthField=function (cfg) { Ext.ux.MonthField.superclass.constructor .call(this,Ext.apply({ },cfg||{ })); } Ext.extend(Ext.ux.MonthField,Ext.form.DateField,{ format:"Y-m", triggerClass:"x-form-date-trigger", 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); } }, onTriggerClick:function () { if(this.disabled) { return ; } if(this.menu==null) { this.menu=new Ext.ux.MonthMenu(); } Ext.apply(this.menu.picker,{ }); this.menu.on(Ext.apply({ },this.menuListeners,{ scope:this })); this.menu.show(this.el,"tl-bl?"); } }); Ext.reg("monthfield",Ext.ux.MonthField);
相關推薦
Extjs DateField控制元件-改寫只選年月
呼叫程式碼一: var monthField = new Ext.ux.MonthField({ id:'month', fieldLabel: '月份', allowBlank:false, readOnly
easyui datebox時間控制元件如何只顯示年月
easyui datebox控制元件,只顯示年月,不顯示年月日 需要的效果圖如下: 具體的js程式碼: <script> $(function(){ intiMonthBox('costTime'); }); var
DatePicker控制元件/日期控制元件,只顯示年月/隱藏日
datePicker = (DatePicker) dateTimeLayout.findViewById(R.id.date_picker); ((ViewGroup)((ViewGroup) d
ExtJs中定製日曆控制元件——帶複選框
效果圖: 程式碼: /*********************日曆元件部分**************************** begin */ var dateArray = new Array(); var printDateArray = fun
在Activity中引用控制元件以及控制元件的點選事件
今天我們要講的是在Activity中使用控制元件,我們在AndroidStudio中建立好了專案,會有一個Mainactivity,對了這裡推薦大家在使用AndroidStudio寫程式碼的時候,選擇project如下圖: 選擇這種結構呢,大家可以很清楚的看到專案目錄結構 良好的
獲取ListControl控制元件中(複選框)CheckBox的狀態
轉載:http://blog.chinaunix.net/uid-20680966-id-1896376.html 推薦:簡單明瞭的例子,適合入門,剩下的就是自由發揮了。 注:LVN_ITEMCHANGED 某個項已經發生變化。 如果使用VS2010或更高版本,字元一般預設Unicod
DevExpress TreeList控制元件的複選框
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
【Android控制元件】點選變暗效果
需要準備 兩張圖片做背景,一張的正常顯示的效果,一張是點選後呈現的效果。 或者兩個表示不同效果的xml檔案,一個表示正常顯示的效果,一個表示點選後呈現的效果。 <!--greenbutton_pressed--> <
RecyclerView的點選--長按--以及item裡面控制元件的點選事件
主要是在介面卡裡面編寫在程式碼裡面呼叫: 核心程式碼: private OnItemClickListener onItemClickListener;//點選事件 private OnItemLongClickListener onItemLongClickListener
jquery-ui裡面的日期控制元件 datepicker只顯示年和月
1.jquery-ui 日期控制元件可以理解有三個部分組成。頭部包含年月兩個下拉框,中間部分包每月對應的天數,尾部包含時間(時分秒) 2.要樣式上不顯示天數通過CSS樣式控制 程式碼如下: <style type="text/css"> .u
為DataGridView控制元件實現複選功能
實現效果: 知識運用: DataGridViewCheckBoxColumn類 實現程式碼: private class Fruit { public int Price { get; set; } pu
Android中RecyclerView的item中控制元件的點選事件新增刪除一行、上移下移一行的程式碼實現
Demo展示圖片 佈局程式碼 // (layout)activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/an
ios-swift-為圖片控制元件(自定義控制元件)新增點選事件
@IBOutlet var img_guanggao: UIImageView! override func viewDidLoad() { super.viewDidLoad(
【OC】給UIView、UILabel、UIImageView等等繼承UIView的控制元件新增點選功能
#import <UIKit/UIKit.h> typedef void(^actionBlock)(void); @interface UIView (UIViewController) /** 得到View所在的控制器 @return 控制器 */ - (UI
點選listView條目,給點中條目加上上下邊框(變換背景),item佈局控制元件的點選事件
1–>點選listView條目,給條目加上上下邊框,如圖: deliveryAddAdapter.setSelectIndex(position); deliveryAddAdapte
在visual studio 2017下用xamarin for android 做個簡單的註冊頁面,包含單選控制元件,多選控制元件和下拉選單控制元件
照著牛腩老師的視訊,自己做了個註冊頁面,實現了簡單的單選控制元件、多選控制元件、下拉選單控制元件的使用,由於日曆控制元件太醜,就不模仿了,下面就是reg.axml的佈局效果,後面是程式碼。 , <?xml version="1.0" encoding="utf-8"?
iOS開發之在scrollview上新增點選並解決其子控制元件的點選無響應(如tableView)
- (void)addTap{ UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:s
封裝-給繼承自UIView的控制元件新增點選事件
在實際開發中,可能會需要給UILabel、UIView等等新增點選事件,目的就是在保留控制元件自身屬性的同時,多一個點選效果,所以這裡寫了一個UIView的category,用於處理這種情況。 1、.h檔案程式碼如下: #import <UIKit
使用easyui框架form控制元件,單選按鈕radio或複選框checkbox樣式問題
easyui只提供了textbox文字框,未提供單選按鈕radio或複選框checkbox控制元件,在使用過程中,會存在單選按鈕radio或複選框checkbox與文字框textbox樣式不統一的問題,要保證其樣式的統一性,可以通過如下程式碼實現: for
獲取圖片控制元件按鈕點選事件
第一種方法 public GUITexture startText; //圖片控制元件 if(Input.GetMouseButtonDown(0)) //響應滑鼠左擊事件 { Rect rect =startText.GetScreenRect(); /