选择月份或年份时，ExtJS 5 xtype 日期字段不起作用 [英] ExtJS 5 xtype datefield is not working when selecting month or year

问题描述

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

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

小提琴: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 中修复

This has been fixed in ExtJs 5.1.0.107

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

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

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

推荐答案

结果确实是 Ext.Js v 5.0.1 中的一个错误.http://www.sencha.com/forum/showthread.php?289825

It turned out to be a bug indeed in Ext.Js v 5.0.1. http://www.sencha.com/forum/showthread.php?289825

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

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

这篇关于选择月份或年份时，ExtJS 5 xtype 日期字段不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！