选择月份或年份时,ExtJS 5 xtype datefield不工作 [英] ExtJS 5 xtype datefield is not working when selecting month or year

查看:253
本文介绍了选择月份或年份时,ExtJS 5 xtype datefield不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当单击下拉列表以选择个别月/年时,对话框将消失,就像我想要点击一样。

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

小提琴: https://小提琴。 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 datefield不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆