Override the time control. Only the page for selecting the year and month is displayed.

The following is a function down on the ext official website that only displays year and month, not day
// In the. html
<Span id = "curMonthDiv"> & nbsp; </span>

// In the. js
MyApp. app = function (){
Var monthPicker = null;

Return {
Init: function (){

MonthPicker = new Ext. ux. MonthField ({
Format:'m, y ',
UseDayDate: 1,
NoPastYears: true,
RenderTo: 'curmonthdiv ',
MonthNames: [/* month names... */]
});
// #1: This works, but still turns the text input gray/doesn't look good
MonthPicker. el. dom. readOnly = true;

// Add listener for when the OK button is clicked (go to new month)
// #2: doesn' t work
MonthPicker. on ("select", function (picker, selDate ){
// Go to the new month-contact server...
// When I select the month and hit the OK btn, this code is not reached
});

MonthPicker. setValue (new Date (); // today
} // End init ()
}; // End return
} (); // End myApp. app

----------------------------------------------
Below is my colleague's extension:

Ext. ux. MonthPicker = Ext. extend (Ext. Component ,{
Format: "M-y ",
OkText: Ext. DatePicker. prototype. okText,
CancelText: Ext. DatePicker. prototype. cancelText,
Constraw.viewport: 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 );

Eg: You can use monthfield when using it.
{
FieldLabel: 'start year ',
Id: 'startyear _ datefieldid ',
Name: 'start ',
ItemCls: 'leftflow ',
ClearCls: 'allowflow ',
Width: 180,
Value: '20140901 ',
Format: 'y ',
ReadOnly: true,
Xtype: 'monthfield'
}