[CLOSED] Issue with TimeField with update Ext.net from 2.5 to 4.1

  1. #1

    [CLOSED] Issue with TimeField with update Ext.net from 2.5 to 4.1

    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...nTime-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.
  2. #2
    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!
    Last edited by fabricio.murta; Jul 13, 2016 at 3:23 PM.
  3. #3
    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:
    Click image for larger version. 

Name:	CapturaErrorJavascriptTimeField.JPG 
Views:	90 
Size:	45.7 KB 
ID:	24677

    so, probably the key is in there.

    regards.
  4. #4
    Sorry! I copy-pasted the wrong reviewed code! I'm editing the post with the correct one!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    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

    Click image for larger version. 

Name:	TimeField2.JPG 
Views:	66 
Size:	55.7 KB 
ID:	24692Click image for larger version. 

Name:	TimeField3.JPG 
Views:	84 
Size:	66.2 KB 
ID:	24693Click image for larger version. 

Name:	TimeField4.JPG 
Views:	104 
Size:	55.7 KB 
ID:	24694Click image for larger version. 

Name:	TimeField5.JPG 
Views:	81 
Size:	47.8 KB 
ID:	24695

    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.
  6. #6
    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!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Batch Update Issue
    By shaileshsakaria in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 03, 2013, 7:08 AM
  2. Replies: 5
    Last Post: Dec 12, 2012, 4:07 AM
  3. [CLOSED] V0.8 to v1.0 update issue
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Dec 21, 2010, 7:19 AM
  4. [CLOSED] HTMLEditor Issue after last Update
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 27, 2010, 2:05 PM
  5. TimeField issue
    By idrissb in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 17, 2009, 9:50 AM

Tags for this Thread

Posting Permissions