[3.1.0] CellEditing DateField[Type=Month] editor issue in Chrome

  1. #1

    [3.1.0] CellEditing DateField[Type=Month] editor issue in Chrome

    Hi,

    Impossible select date from DateField[Type=Month] in GridPanel using CellEditing plugin in Chrome 43.0.2357.132 m

    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @{
        Layout = null;
        var X = Html.X();
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
    </head>
    <body>
        @(Html.X().ResourceManager().ScriptMode(Ext.Net.ScriptMode.Debug))
    
        @(X.GridPanel()
            .Width(300)
            .Height(400)
            .Store(X.Store()
                .Model(X.Model()
                    .Fields(
                        X.ModelField().Name("Date").Type(ModelFieldType.Date)
                    )
                )
                .Data(new object[] { new { Date = DateTime.UtcNow } })
            )
            .ColumnModel(
                X.DateColumn()
                    .DataIndex("Date")
                    .Format("MMM-yyyy")
                    .Text("Date")
                    .Flex(1)
                    .Editor(X.DateField()
                        .Type(DatePickerType.Month)
                        .Editable(false)
                        .Format("MMM-yyyy")
                    )
            )
            .ViewConfig(X.GridView().MarkDirty(false))
            .Plugins(
                X.CellEditing()
            )
        )
    
    </body>
    </html>
  2. #2
    Hello,

    I've found and fixed this issue.

    Original code (ext.net overrides)
    Ext.form.field.Date.override({
        createPicker: function () {
            var me = this,
                isMonth = this.type == "month",
                format = Ext.String.format, pickerConfig,
                monthPickerOptions;
    
            if (me.okText) { monthPickerOptions = monthPickerOptions || {}; monthPickerOptions.okText = me.okText; }
            if (me.cancelText) { monthPickerOptions = monthPickerOptions || {}; monthPickerOptions.cancelText = me.cancelText; }
            if (isMonth) {
                pickerConfig =
                    {
                        ownerCmp: me, floating: true, hidden: true, small: true,
                        listeners:
                            {
                                scope: me,
                                cancelclick: me.collapse,
                                okclick: me.onMonthSelect,
                                yeardblclick: me.onMonthSelect,
                                monthdblclick: me.onMonthSelect
                            }, keyNavConfig: { esc: function () { me.collapse(); } }
                    };
                if (Ext.isChrome)
                {
                    me.originalCollapse = me.collapse;
                    pickerConfig.listeners.show =
                        {
                            fn: function () {
                                this.picker.el.on({
                                    mousedown: function () { this.collapse = Ext.emptyFn; },
                                    mouseup: function () { this.collapse = this.originalCollapse; },
                                    scope: this
                                });
                            }, single: true
                        }
                }
                if (me.pickerOptions) { Ext.apply(pickerConfig, me.pickerOptions, monthPickerOptions || {}); }
                return Ext.create('Ext.picker.Month', pickerConfig);
            }
            pickerConfig = { pickerField: me, monthPickerOptions: monthPickerOptions, floating: true, focusable: false, hidden: true, minDate: me.minValue, maxDate: me.maxValue, disabledDatesRE: me.disabledDatesRE, disabledDatesText: me.disabledDatesText, disabledDays: me.disabledDays, disabledDaysText: me.disabledDaysText, format: me.format, showToday: me.showToday, startDay: me.startDay, minText: format(me.minText, me.formatDate(me.minValue)), maxText: format(me.maxText, me.formatDate(me.maxValue)), listeners: { scope: me, select: me.onSelect }, keyNavConfig: { esc: function () { me.collapse(); } } }; if (me.pickerOptions) { Ext.apply(pickerConfig, me.pickerOptions); }
            return Ext.create('Ext.picker.Date', pickerConfig);
        }
    });
    Fixed code:
    Ext.define('Onyx.form.field.Date', {
        override: 'Ext.form.field.Date',
        createPicker: function () {
            var me = this,
                isMonth = this.type == "month",
                format = Ext.String.format, pickerConfig,
                monthPickerOptions;
    
            if (me.okText) { monthPickerOptions = monthPickerOptions || {}; monthPickerOptions.okText = me.okText; }
            if (me.cancelText) { monthPickerOptions = monthPickerOptions || {}; monthPickerOptions.cancelText = me.cancelText; }
            if (isMonth) {
                pickerConfig =
                    {
                        ownerCmp: me,
                        floating: true, hidden: true, small: true,
                        listeners:
                            {
                                scope: me,
                                cancelclick: me.collapse,
                                okclick: me.onMonthSelect,
                                yeardblclick: me.onMonthSelect,
                                monthdblclick: me.onMonthSelect
                            },
                        keyNavConfig: { esc: function () { me.collapse(); } }
                    };
                if (Ext.isChrome) {
                    pickerConfig.listeners.show =
                        {
                            fn: function () {
                                this.picker.el.on({
                                    mousedown: function (e, t) {
                                        e.stopEvent();
                                    }
                                });
                            },
                            single: true
                        }
                }
                if (me.pickerOptions) { Ext.apply(pickerConfig, me.pickerOptions, monthPickerOptions || {}); }
                return Ext.create('Ext.picker.Month', pickerConfig);
            }
            pickerConfig = { pickerField: me, monthPickerOptions: monthPickerOptions, floating: true, focusable: false, hidden: true, minDate: me.minValue, maxDate: me.maxValue, disabledDatesRE: me.disabledDatesRE, disabledDatesText: me.disabledDatesText, disabledDays: me.disabledDays, disabledDaysText: me.disabledDaysText, format: me.format, showToday: me.showToday, startDay: me.startDay, minText: format(me.minText, me.formatDate(me.minValue)), maxText: format(me.maxText, me.formatDate(me.maxValue)), listeners: { scope: me, select: me.onSelect }, keyNavConfig: { esc: function () { me.collapse(); } } }; if (me.pickerOptions) { Ext.apply(pickerConfig, me.pickerOptions); }
            return Ext.create('Ext.picker.Date', pickerConfig);
        }
    })
    Difference:

    I override

                if (Ext.isChrome)
                {
                    me.originalCollapse = me.collapse;
                    pickerConfig.listeners.show =
                        {
                            fn: function () {
                                this.picker.el.on({
                                    mousedown: function () { this.collapse = Ext.emptyFn; },
                                    mouseup: function () { this.collapse = this.originalCollapse; },
                                    scope: this
                                });
                            }, single: true
                        }
                }
    on

                if (Ext.isChrome) {
                    pickerConfig.listeners.show =
                        {
                            fn: function () {
                                this.picker.el.on({
                                    mousedown: function (e, t) {
                                        e.stopEvent();
                                    }
                                });
                            },
                            single: true
                        }
                }
    I've deleted old mousedown and mouseup events and add stop event when user clicks on month picker. All works correctly (it has been tested in CellEditing and Panel items).

    Ext.Net developers Please, fix it in the next release.
  3. #3
    Hello Yury,

    Thank you! Committed the fix in the revision 6553 (trunk). It goes to 3.2.1.

    Logged in an already existing GitHub issue:
    https://github.com/extnet/Ext.NET/is...ment-133365012
    Last edited by Daniil; Aug 21, 2015 at 3:57 PM.
  4. #4
    Thank you, Daniil

    Today I've received same issue from Safari on Mac.
    I've overridden from "if(Ext.isChrome)" to "if(Ext.isWebKit)" and all works correctly.
    I think it will be reproduced on all webkit browsers (like Chrome, Safari new Opera).

    Please, fix it on next release.
  5. #5
    Thank you, Yury!

    Applied in the revision #6549 (trunk). It goes to 3.3.

    Logged in GitHub:
    https://github.com/extnet/Ext.NET/is...ment-134630793

Similar Threads

  1. [CLOSED] [0.8.2] Datefield Issue in Chrome (solved)
    By Richardt in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 27, 2013, 3:18 PM
  2. [CLOSED] Default month of Datefield always today
    By Bert76 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 20, 2011, 4:45 PM
  3. [CLOSED] ISSUE MONTH PLUGIN ON DATEFIELD
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Mar 02, 2010, 1:01 PM
  4. How to accept only month & year in a DateField Control ?
    By n_s_adhikari@rediffmail.com in forum 1.x Help
    Replies: 2
    Last Post: Sep 23, 2009, 4:45 PM
  5. datefield - month not rendering
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Jul 14, 2009, 4:23 PM

Tags for this Thread

Posting Permissions