选择月份或年份时，ExtJS 5 xtype 日期字段不起作用答案

【问题标题】：ExtJS 5 xtype datefield is not working when selecting month or year选择月份或年份时，ExtJS 5 xtype 日期字段不起作用
【发布时间】：2014-09-22 17:28:35
【问题描述】：

当点击下拉菜单选择个别月份/年份时，对话框消失，就像我试图点击离开一样。

小提琴：https://fiddle.sencha.com/#fiddle/9m6

   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()
        });
    });

ExtJs 5.1.0.107 中已修复此问题

EXTJS-15968 点击月份选择器后日期选择器消失。

http://docs.sencha.com/extjs/5.1/whats_new/release_notes.html

【问题讨论】：

请添加代码的基本部分。如果您提供的链接损坏，代码将不可用。
看起来很奇怪，你应该向 Sencha 提交一个错误。这是一个更小的复制品fiddle.sencha.com/#fiddle/amrExt.widget({xtype: 'datefield', renderTo: Ext.getBody()});
作为一种解决方法，您可以使用ctrl+left/right 切换月份，使用ctrl+up/down 切换年份
好建议。谢谢。
在示例和 api 文档中工作正常：dev.sencha.com/ext/5.0.1/examples/kitchensink/#form-date

标签： extjs datefield

【解决方案1】：

事实证明这确实是 Ext.Js v 5.0.1 中的一个错误。 http://www.sencha.com/forum/showthread.php?289825

覆盖 Ext.picker.Date 类的解决方案对我有用：

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

【讨论】：