PDA

View Full Version : [3.1.0] CellEditing DateField[Type=Month] editor issue in Chrome



Yury
Jul 09, 2015, 3:33 PM
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.Sc riptMode.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>

Yury
Jul 09, 2015, 5:35 PM
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.

Daniil
Aug 21, 2015, 11:23 AM
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/issues/668#issuecomment-133365012

Yury
Aug 25, 2015, 2:14 PM
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.

Daniil
Aug 25, 2015, 4:35 PM
Thank you, Yury!

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

Logged in GitHub:
https://github.com/extnet/Ext.NET/issues/668#issuecomment-134630793