[4.1.1 GA] Daterange VType cycling if both fields are configured with "value"

[Daniil]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1.1 GA

Browser versions tested against:

• Chrome

Description:

• Daterange VType causes
  Uncaught RangeError: Maximum call stack size exceeded
  
  if the both fields are configured with "value".
• I understand it is just an example of custom validation and you can ignore that bug. Just I decided to report.
• By the way, I can't see any fields when running the online example.

http://docs.sencha.com/ext-js/4-1/#!/example/form/adv-vtypes.html

Steps to reproduce the problem:

• Just run the sample in Chrome with the change I described in "Test case".

The result that was expected:

• No JS error.

The result that occurs instead:

• A JS
  Uncaught RangeError: Maximum call stack size exceeded
  
  error occurs.

Test Case:

Define "value" for the both fields.

var dr = Ext.create('Ext.form.Panel', {
    renderTo: 'dr',
    frame: true,
    title: 'Date Range',
    bodyPadding: '5 5 0',
    width: 350,
    fieldDefaults: {
        labelWidth: 125,
        msgTarget: 'side',
        autoFitErrors: false
    },
    defaults: {
        width: 300
    },
    defaultType: 'datefield',
    items: [{
        fieldLabel: 'Start Date',
        name: 'startdt',
        itemId: 'startdt',
        vtype: 'daterange',
        endDateField: 'enddt' // id of the end date field
        , value: new Date()
    }, {
        fieldLabel: 'End Date',
        name: 'enddt',
        itemId: 'enddt',
        vtype: 'daterange',
        startDateField: 'startdt' // id of the start date field
        , value: new Date() 
    }]
});

HELPFUL INFORMATION

Possible fix:

• I was able to fix it replacing

start.validate();
this.dateRangeMax = date;

with

this.dateRangeMax = date;
start.validate();

and

end.validate();
this.dateRangeMin = date;

wtih

this.dateRangeMin = date;
end.validate();

Here is the result:

daterange: function(val, field) {
    var date = field.parseDate(val);

    if (!date) {
        return false;
    }
    if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
        var start = field.up('form').down('#' + field.startDateField);
        start.setMaxValue(date);
        this.dateRangeMax = date;
        start.validate();
                
    }
    else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
        var end = field.up('form').down('#' + field.endDateField);
        end.setMinValue(date);
        this.dateRangeMin = date;
        end.validate();
                
    }
    /*
        * Always return true since we're only using this vtype to set the
        * min/max allowed values (these are tested for after the vtype test)
        */
    return true;
}

By the way, somewhere there is "this", somewhere - "field". A bit inconsistent.

[mitchellsimoens]

That example is working 100% for me in 4.1.1

[Daniil]

Yes, it works fine with no changes.

But did you try to add

, value: new Date()

for the both fields?

Also can you confirm this?

• By the way, I can't see any fields when running the online example.

http://docs.sencha.com/ext-js/4-1/#!/example/form/adv-vtypes.html

[mitchellsimoens]

Yes, it works fine with no changes.

But did you try to add

, value: new Date()

for the both fields?

Odd, copied and pasted your code and IDEA didn't like that line with comma in it and didn't paste it into the code. Now I get that error.

Also can you confirm this?

I see the fields:

Screen Shot 2012-08-06 at 10.23.33 AM.png

[Daniil]

Thanks for opening a bug ticket.

I see the fields:

Weird, I can't see them in all - Chrome, FireFox, IE. Not sure it can somehow affect - there is Windows 7 on my end.

No errors in the console.

Also I tried to clear the cache in all browsers - no effect. Can a "correct" page be cached on your side?

I just discovered: a response of adv-types.js request is empty (inspected using FireBug). I get an empty screen clicking the JS file "See adv-vtypes.js.".

Request URL is
http://docs.sencha.com/ext-js/4-1/ex.../adv-vtypes.js

The status is "200 OK".

So, probably, you get that script from the cache, isn't that so?

By the way, there is a simple way to cause re-requesting an example? The following scenario:

1. I open some example.
2. Go to its script calling "See *.js".
3. Is there any simple way to get the example back without closing the tab? Would be comfortable.

[mitchellsimoens]

In Chrome I turn caching off. Looking at a fresh install of Safari 6 from a week ago I see it no problems there also. When I turn my Windows machine on next I will look there but shouldn't make a difference at all. Firebug should tell you if it came form cache anyway.

[Daniil]

When I turn my Windows machine on next I will look there but shouldn't make a difference at all.

Agree.

Firebug should tell you if it came form cache anyway.

Yes, tells. It's not cached on my end, the response status is "200". This link
http://docs.sencha.com/ext-js/4-1/ex.../adv-vtypes.js
just returns an empty response.

Could you try directly this link and look at a response status?

[mitchellsimoens]

Just testing on my Windows 7 box using Chrome and Firefox that example loads up, the direct link has full source and returns 200

[Daniil]

Weird that it is not reproducible on your end.

I just asked my colleague to give it a try on his PC - he has the same as I do.

By the way, we just discovered that adv-vtypes.js is just not attached to the adv-vtypes.html. Here is how it looks on our end:

adv-vtypes.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Advanced VType Examples</title>

    <!-- ExtJS -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../ext-all.js"></script>

    <!-- Shared -->
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />

    <!-- GC -->


    <!-- Example -->
    <FONT size="1">[AD]</FONT>
    <style type="text/css">
        #dr, #pw {
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <h1>Advanced Validation Examples Using VTypes</h1>

    <div id="dr">
        <p>The first example shows two date fields acting as a date range.  Selecting an initial
        date sets the minimum value for the end field.  Selecting an ending date sets a maximum
        value for the start field.</p>
    </div>

    <div id="pw">
        <p>This second example shows a password verification, the second value must be equivalent
        to the first to validate.</p>
    </div>

    <p>The js is not minified so it is readable. See <a href="adv-vtypes.js">adv-vtypes.js</a>.</p>
</body>
</html>

And my colleague is also getting an empty response for the direct JS link.

Sure, not a problem for us, just would be great to get to the bottom of an issue

[Daniil]

Hi Mitchell,

Could you kindly inform is there any time-frame for this issue?

Please note that I suggested a possible fix in the original post It doesn't look bad...