extjs 时间控件只显示年月

浏览数：53 / 时间：2015年06月09日

调用代码一：

[javascript] view plain copy print ?

var monthField = new Ext.ux.MonthField({
id:‘month‘,
fieldLabel: ‘月份‘,
allowBlank:false,
readOnly : true,
format:‘Y年m月‘,
listeners:{"blur":function(){
alert()
}}
);

调用代码二（部分）：

[javascript] view plain copy print ?

fieldLabel:　‘所属日期‘,
width : 150,
xtype:　‘monthfield‘,
name:　‘date‘,
hiddenName : ‘date‘,
format:　"Y-m",
editable　:　false,
value:new Date().dateFormat(‘Y-m‘),

下面代码全复制做成一个monthPick.js就OK了，页面导入就可以像上面两种使用方法使用

[javascript] view plain copy print ?

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