原文作者：http://ext4all.com/post/ext4-monthfield-with-month-picker-for-extjs4
某论坛弄下来的，。原文如下：
我也来发一个年月选择控件，因为某些场合只需要年份和月份信息，直接使用日期控件，虽然能通过format等方式可以得到，但是还要选择日期才能完成输 入，比较麻烦，在网上找了一下，搜索到两个，都是2.x版的；于是就自己动手写一个，在4.1版中测试通过。给需要的朋友，效果如下图：
按 Ctrl+C 复制代码
MonthField.js
Ext.define('Ext.ux.form.MonthField', {
extend: 'Ext.form.field.Picker',
alias: 'widget.monthfield',
//requires: ['Ext.picker.Date'],
//alternateClassName: ['Ext.form.DateField', 'Ext.form.Date'],
format: "Y-m",
altFormats: "m/y|m/Y|m-y|m-Y|my|mY|y/m|Y/m|y-m|Y-m|ym|Ym",
//disabledDaysText: "Disabled",
//disabledDatesText: "Disabled",
//minText: "The date in this field must be equal to or after {0}",
//maxText: "The date in this field must be equal to or before {0}",
//invalidText: "{0} is not a valid date - it must be in the format {1}",
triggerCls: Ext.baseCSSPrefix + 'form-date-trigger',
//showToday: true,
//initTime: '12',
//initTimeFormat: 'H',
matchFieldWidth: false,
startDay: new Date(),
initComponent: function () {
var me = this;
me.disabledDatesRE = null;
me.callParent();
},
initValue: function () {
var me = this,
value = me.value;
if (Ext.isString(value)) {
me.value = Ext.Date.parse(value, this.format);
}
if (me.value)
me.startDay = me.value;
me.callParent();
},
rawToValue: function (rawValue) {
return Ext.Date.parse(rawValue, this.format) || rawValue || null;
},
valueToRaw: function (value) {
return this.formatDate(value);
},
formatDate: function (date) {
return Ext.isDate(date) ? Ext.Date.dateFormat(date, this.format) : date;
},
createPicker: function () {
var me = this,
format = Ext.String.format;
return Ext.create('Ext.picker.Month', {
//renderTo: me.el,
pickerField: me,
ownerCt: me.ownerCt,
renderTo: document.body,
floating: true,
shadow: false,
focusOnShow: true,
listeners: {
scope: me,
cancelclick: me.onCancelClick,
okclick: me.onOkClick,
yeardblclick: me.onOkClick,
monthdblclick: me.onOkClick
}
});
},
onExpand: function () {
//this.picker.show();
this.picker.setValue(this.startDay);
//
},
// onCollapse: function () {
// this.focus(false, 60);
// },
onOkClick: function (picker, value) {
var me = this,
month = value[0],
year = value[1],
date = new Date(year, month, 1);
me.startDay = date;
me.setValue(date);
this.picker.hide();
//this.blur();
},
onCancelClick: function () {
this.picker.hide();
//this.blur();
}
});按 Ctrl+C 复制代码
<html > <head> <title>Insurance Report</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript" src="MonthField.js"></script> <script type="text/javascript" src="ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function () { var form = Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), title: 'Simple Form', height: 500, layout: 'hbox', items: [ { xtype: 'monthfield', fieldLabel: '日期', editable: false, width: 150, labelWidth: 30, labelAlign: 'right', format: 'Y-m' }, { xtype: 'monthfield', fieldLabel: '日期', editable: false, width: 150, labelWidth: 30, labelAlign: 'right', format: 'Ym' } ] }); }); </script> </head> <body > </body> </html>
DataPicker 时分秒插件：http://www.sencha.com/forum/showthread.php?137242-Ext.ux.DateTimeField-DateTimePicker-for-ext4-also-DateTimeMenu-TimePickerField