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);