Code:
<?
xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
<title>MonthPicker</title>
<linkrel="stylesheet"href="/ext3/resources/css/ext-all.css"></link>
<linkrel="stylesheet"href="/ext3/examples/calendar/resources/css/examples.css"></link>
<scripttype="text/javascript"src="/ext3/adapter/ext/ext-base-debug.js"></script>
<scripttype="text/javascript"src="/ext3/ext-all-debug.js"></script>
<scripttype="text/javascript"src="/ext3/examples/shared/examples.js"></script>
</head>
<body>
<scripttype="text/javascript">
Ext.onReady(
function() {
Ext.BLANK_IMAGE_URL = '/ext3/resources/images/default/s.gif';
Ext.QuickTips.init(true);
var w = new Ext.Window({
width: 400,
height: 300,
title: 'MonthPicker',
layout: 'fit',
padding: 5,
closable: false,
items: {
xtype: 'form',
unstyled: true,
monitorValid: true,
items: [{
xtype: 'textfield',
id: 'tbDummy1',
fieldLabel: 'Dummy1'
},
{
xtype:
'datefield',
id: 'dtMonth',
fieldLabel: 'Choose month',
format: 'M Y',
editable: false,
readOnly: false,
listeners: {
show: function(){
this.picker.showMonthPicker();
this.picker.mon(this.picker.monthPicker, 'click', function(e, t){
e.stopEvent();
var el = new Ext.Element(t), pn;
if(el.is('button.x-date-mp-cancel')){
this.picker.hideMonthPicker();
this.hide();
}
elseif(el.is('button.x-date-mp-ok')){
var d = new Date(this.picker.mpSelYear, this.picker.mpSelMonth, (this.picker.activeDate || this.picker.value).getDate());
if(d.getMonth() != this.picker.mpSelMonth){
d = new Date(this.picker.mpSelYear, this.picker.mpSelMonth, 1).getLastDateOfMonth();
}
this.picker.update(d);
this.picker.hideMonthPicker();
this.picker.setValue(d);
this.picker.fireEvent('select', this.picker, this.picker.value);
}
}, this);
this.picker.mon(this.picker.monthPicker, 'dblclick', function(e, t){
e.stopEvent();
var el = new Ext.Element(t), pn;
if((pn = el.up('td.x-date-mp-month', 2))){
var d = new Date(this.picker.mpSelYear, pn.dom.xmonth, (this.picker.activeDate || this.picker.value).getDate());
this.picker.update(d);
this.picker.hideMonthPicker();
this.picker.setValue(d);
this.picker.fireEvent('select', this.picker, this.picker.value);
}
elseif((pn = el.up('td.x-date-mp-year', 2))){
var d = new Date(pn.dom.xyear, this.picker.mpSelMonth, (this.picker.activeDate || this.picker.value).getDate());
this.picker.update(d);
this.picker.hideMonthPicker();
this.picker.setValue(d);
this.picker.fireEvent('select', this.picker, this.picker.value);
}
}, this);
}}}, {
xtype: 'datefield',
id: 'dtMonth2',
fieldLabel: 'Regular picker',
format: 'M Y',
editable: false,
readOnly: false
}, {
xtype:
'textfield',
id: 'tbDummy2',
fieldLabel: 'Dummy2'
}],
buttons: [{
text:
'Save',
id: 'btnSubmit',
formBind: true,
handler: function() {
if ('dtMonth value', this.ownerCt.ownerCt.items.item('dtMonth').getValue()) {
Ext.example.msg('getValue().format(\'m/Y\')', this.ownerCt.ownerCt.items.item('dtMonth').getValue().format('m/Y'));
}
}
}],
listeners: {
afterrender: function() {
this.items.item('tbDummy1', true);
var nav = new Ext.KeyMap(this.getEl(), {
key: Ext.EventObject.ENTER,
fn: this.buttons[0].handler,
scope: this.buttons[0]
});
}
}
},
listeners: {
show: function() {
this.items.item(0).items.item(0).focus(false, 250);
}
}
});
w.show();
});
</script>
<scripttype="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<scripttype="text/javascript">
var pageTracker = _gat._getTracker("UA-3507977-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>