extjs年月日时分选择控件_选择月份或年份时，ExtJS 5 xtype datefield不工作

When clicking on the dropdown to select individual months/years the dialog disappears like I am trying to click away.

Ext.onReady(function() {

Ext.create('Ext.form.Panel', {

title: 'Simple Form',

bodyPadding: 5,

width: 350,

// The fields

defaultType: 'textfield',

items: [{

xtype: 'datefield',

fieldLabel: 'Start Date',

id: 'startDate'

}],

renderTo: Ext.getBody()

});

});

This has been fixed in ExtJs 5.1.0.107

EXTJS-15968 Date Picker disappear after click on Month Picker.

解决方案

It turned out to be a bug indeed in Ext.Js v 5.0.1.

http://www.sencha.com/forum/showthread.php?289825

Solution with overriding Ext.picker.Date class worked for me:

Ext.define('EXTJS-14607.picker.Date', {

override: 'Ext.picker.Date',

runAnimation: function(isHide) {

var me = this,

picker = this.monthPicker,

options = {

duration: 200,

callback: function() {

picker.setVisible(!isHide);

// See showMonthPicker

picker.ownerCmp = isHide ? null : me;

}

};

if (isHide) {

picker.el.slideOut('t', options);

} else {

picker.el.slideIn('t', options);

}

},

hideMonthPicker: function(animate) {

var me = this,

picker = me.monthPicker;

if (picker && picker.isVisible()) {

if (me.shouldAnimate(animate)) {

me.runAnimation(true);

} else {

picker.hide();

// See showMonthPicker

picker.ownerCmp = null;

}

}

return me;

},

showMonthPicker: function(animate) {

var me = this,

el = me.el,

picker;

if (me.rendered && !me.disabled) {

picker = me.createMonthPicker();

if (!picker.isVisible()) {

picker.setValue(me.getActive());

picker.setSize(el.getSize());

picker.setPosition(-el.getBorderWidth('l'), -el.getBorderWidth('t'));

if (me.shouldAnimate(animate)) {

me.runAnimation(false);

} else {

picker.show();

// We need to set the ownerCmp so that owns() can correctly

// match up the component hierarchy, however when positioning the picker

// we don't want it to position like a normal floater because we render it to

// month picker element itself.

picker.ownerCmp = me;

}

}

}

return me;

}

});