PDA

View Full Version : [CLOSED] Issue with TimeField with update Ext.net from 2.5 to 4.1



opendat2000
Jul 12, 2016, 10:48 PM
Hi everybody.
I have a little problem with one timeField in my application when I try to update from 2.5 to 4.1. let me explain, I posted in 2015 a little problem that you fixed it. so, when I change the ext.net library, this example didn't work anymore.

my example is here:

http://forums.ext.net/showthread.php?60014-CLOSED-Apply-range-19-00-gt-07-00-to-control-TimeField-(MinTime-MaxTime)

the code that you gave me to fix my problem was:



Ext.define("Ext.Picker.TimeOverride", {
override: "Ext.picker.Time",
updateList: function () {
var me = this,
min = me.normalizeDate(me.minValue || me.absMin),
max = me.normalizeDate(me.maxValue || me.absMax);

if (min > max) {
me.rangeFilter.setFilterFn(function (record) {
var date = record.get('date');
return date >= min || date <= max;
});
} else {
me.rangeFilter.setFilterFn(function (record) {
var date = record.get('date');
return date >= min && date <= max;
});
}
me.store.filter();
}
});


so, I need to fix this Javascript code for to work with 4.5 Ext version.

pd: Sorry for my poor english :S.

fabricio.murta
Jul 12, 2016, 11:27 PM
Hello @opendat2000!

Here you go!



Ext.define("Ext.Picker.TimeOverride", {
override: "Ext.picker.Time",
updateList: function () {
var me = this,
min = me.normalizeDate(me.minValue || me.absMin),
max = me.normalizeDate(me.maxValue || me.absMax),
filters = me.getStore().getFilters(),
filter = me.rangeFilter;

if (min > max) {
filter = me.rangeFilter = new Ext.util.Filter({
filterFn: function(record) {
var date = record.get('date');
return date >= min || date <= max;
}
});
} else {
filter = me.rangeFilter = new Ext.util.Filter({
filterFn: function(record) {
var date = record.get('date');
return date >= min && date <= max;
}
});
}
//me.store.filter();
filters.add(filter);
filters.endUpdate();
}
});


And, for reference, full code working on 4.x:



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="61281-timeAmPm.aspx.cs" Inherits="ExtNetPlaygroundMCV_v25.aspEngine._60014_timeAmPm" %>

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Edit Form View - Ext.NET Examples</title>

<script type="text/javascript">
var onKeyUp = function ()
{
var me = this,
v = me.getValue(),
field;

if (me.startDateField)
{
field = Ext.getCmp(me.startDateField);
field.setMaxValue(v);
me.dateRangeMax = v;
}
else if (me.endDateField)
{
field = Ext.getCmp(me.endDateField);
field.setMinValue(v);
me.dateRangeMin = v;
}

field.validate();
};

Ext.define("Ext.Picker.TimeOverride", {
override: "Ext.picker.Time",
updateList: function () {
var me = this,
min = me.normalizeDate(me.minValue || me.absMin),
max = me.normalizeDate(me.maxValue || me.absMax),
filters = me.getStore().getFilters(),
filter = me.rangeFilter;

if (min > max) {
filter = me.rangeFilter = new Ext.util.Filter({
filterFn: function(record) {
var date = record.get('date');
return date >= min || date <= max;
}
});
} else {
filter = me.rangeFilter = new Ext.util.Filter({
filterFn: function(record) {
var date = record.get('date');
return date >= min && date <= max;
}
});
}
//me.store.filter();
filters.add(filter);
filters.endUpdate();
}
});

Ext.define("Ext.form.field.TimeOverride", {
override: "Ext.form.field.Time",
betweenText: "The time in this field must NOT be between {0} and {1}",
getErrors: function (value) {
var me = this,
format = Ext.String.format,
errors = me.callSuper(arguments),
minValue = me.minValue,
maxValue = me.maxValue,
date;

value = me.formatDate(value || me.processRawValue(me.getRawValue()));

if (value === null || value.length < 1) {
return errors;
}

date = me.parseDate(value);
if (!date) {
errors.push(format(me.invalidText, value, Ext.Date.unescapeFormat(me.format)));
return errors;
}

// if minValue and maxValue are specified and minValue is after maxValue (night shift, for example)
if (minValue && maxValue && (minValue > maxValue)) {
return errors;
} else { // normal/original test
if (minValue && date < minValue) {
errors.push(format(me.minText, me.formatDate(minValue)));
}
if (maxValue && date > maxValue) {
errors.push(format(me.maxText, me.formatDate(maxValue)));
}
}

return errors;
}
});
</script>
</head>

<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" SourceFormatting="true" />

<ext:Window ID="FormWindow" runat="server"
Title="Form View"
Width="540"
Height="310"
BodyPadding="15"
Resizable="false"
Closable="false"
Layout="Fit">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server"
Border="false"
Layout="Form">
<Items>
<ext:FieldContainer ID="FieldContainer1" runat="server"
FieldLabel="Range 08.30 -> 18.30"
AnchorHorizontal="100%"
Layout="HBoxLayout">
<Items>
<ext:TimeField ID="TimeFieldStart1" runat="server"
FieldLabel="Start 1"
LabelWidth="60"
MinTime="08:30"
MaxTime="18:30"
Increment="15"
Vtype="daterange"
LabelPad="2"
Width="135">
<CustomConfig>
<ext:ConfigItem Name="endDateField" Value="TimeFieldEnd1" Mode="Value" />
</CustomConfig>
<Listeners>
<Change Fn="onKeyUp" />
</Listeners>
</ext:TimeField>
<ext:DisplayField runat="server" Width="23" Html="&nbsp;" />
<ext:TimeField ID="TimeFieldEnd1" runat="server"
FieldLabel="End 1"
LabelWidth="60"
MinTime="08:30"
MaxTime="18:30"
Increment="15"
Vtype="daterange"
LabelPad="2"
Width="135">
<CustomConfig>
<ext:ConfigItem Name="startDateField" Value="TimeFieldStart1" Mode="Value" />
</CustomConfig>
<Listeners>
<Change Fn="onKeyUp" />
</Listeners>
</ext:TimeField>
</Items>
</ext:FieldContainer>

<ext:FieldContainer ID="FieldContainer2" runat="server"
FieldLabel="Range 08.15 -> 18.45"
AnchorHorizontal="100%"
Layout="HBoxLayout">
<Items>
<ext:TimeField ID="TimeFieldStart2" runat="server"
FieldLabel="Start 2"
LabelWidth="60"
MinTime="08:15"
MaxTime="18:45"
Increment="15"
Vtype="daterange"
LabelPad="2"
Width="135">
<CustomConfig>
<ext:ConfigItem Name="endDateField" Value="TimeFieldEnd2" Mode="Value" />
</CustomConfig>
<Listeners>
<Change Fn="onKeyUp" />
</Listeners>
</ext:TimeField>
<ext:DisplayField runat="server" Width="23" Html="&nbsp;" />
<ext:TimeField ID="TimeFieldEnd2" runat="server"
FieldLabel="End 2"
LabelWidth="60"
MinTime="08:15"
MaxTime="18:45"
Increment="15"
Vtype="daterange"
LabelPad="2"
Width="135">
<CustomConfig>
<ext:ConfigItem Name="startDateField" Value="TimeFieldStart2" Mode="Value" />
</CustomConfig>
<Listeners>
<Change Fn="onKeyUp" />
</Listeners>
</ext:TimeField>
</Items>
</ext:FieldContainer>

<ext:FieldContainer ID="FieldContainer3" runat="server"
FieldLabel="Range 19.00 -> 07.00"
AnchorHorizontal="100%"
Layout="HBoxLayout">
<Items>
<ext:TimeField ID="TimeFieldStart3" runat="server"
FieldLabel="Start 3"
LabelWidth="60"
MinTime="19:00"
MaxTime="07:00"
increment="15"
Vtype="daterange"
LabelPad="2" ValidateOnBlur="false" ValidateOnChange="false"
Width="135">
</ext:TimeField>
<ext:DisplayField runat="server" Width="23" Html="&nbsp;" />
<ext:TimeField ID="TimeFieldEnd3" runat="server"
FieldLabel="End 3"
LabelWidth="60"
MinTime="19:00"
MaxTime="07:00"
LabelPad="2" ValidateOnBlur="false" ValidateOnChange="false"
Width="135">
</ext:TimeField>
</Items>
</ext:FieldContainer>
</Items>
</ext:FormPanel>
</Items>
</ext:Window>
</form>
</body>
</html>


Hope this helps!

opendat2000
Jul 13, 2016, 2:55 PM
hi Fabricio.
Thanks for your reply, but the code still doesn't work, the problem is the same when I tried to execute with the new library (javascript's problem: Uncaught TypeError: Cannot read property 'setFilterFn' of undefined) in line 49 of code.

this error appears when I update library. analyzing, I found a difference in the "me" variable, specifically in the property "rangeFilter". (exist in 2.x but not in 4.x).

Error Image:
24677

so, probably the key is in there.

regards.

fabricio.murta
Jul 13, 2016, 4:22 PM
Sorry! I copy-pasted the wrong reviewed code! I'm editing the post with the correct one!

opendat2000
Jul 20, 2016, 10:50 PM
Hi Fabricio. Sorry for the late response.

I could test the new code that recommended me, and it works, but the logic doesn't work correctly, let me explain.


The Correct logic it worked in the library version 2.x, like this

24692246932469424695

this logic have to work in the field containers 1 and 2. The last container isn't necessary to consider.

so , Is it possible to return to replicate this behavior in the latest version (4.x)?

Regards.

fabricio.murta
Jul 21, 2016, 6:01 AM
Hello! Thanks for pointing that out! Really I missed that bit and didn't port the new method fully.

This seems to address the issue you pointed, looks like it works just like v2.0 now:



Ext.define("Ext.Picker.TimeOverride", {
override: "Ext.picker.Time",
updateList: function () {
var me = this,
min = me.normalizeDate(me.minValue || me.absMin),
max = me.normalizeDate(me.maxValue || me.absMax),
filters = me.getStore().getFilters(),
filter = me.rangeFilter;

filters.beginUpdate();
if (filter) {
filters.remove(filter);
}

if (min > max) {
filter = me.rangeFilter = new Ext.util.Filter({
filterFn: function(record) {
var date = record.get('date');
return date >= min || date <= max;
}
});
} else {
filter = me.rangeFilter = new Ext.util.Filter({
filterFn: function(record) {
var date = record.get('date');
return date >= min && date <= max;
}
});
}

filters.add(filter);
filters.endUpdate();
}
});


Just replace this override on the test case and it should be good!