<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>#Adam.Blog# &#187; ExtJs</title>
	<atom:link href="http://blog.adampresley.com/tag/extjs/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.adampresley.com</link>
	<description>I&#039;m bringin&#039; nerdy back.</description>
	<lastBuildDate>Fri, 03 Sep 2010 15:59:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
<atom:link rel="hub" href="http://pubsubhubbub.appspot.com"/><atom:link rel="hub" href="http://superfeedr.com/hubbub"/><atom:link rel="hub" href="http://github.com/tonyg/rabbithub"/>		<item>
		<title>DateField Issues with ExtJs 2.1</title>
		<link>http://blog.adampresley.com/2008/datefield-issues-with-extjs-21/</link>
		<comments>http://blog.adampresley.com/2008/datefield-issues-with-extjs-21/#comments</comments>
		<pubDate>Fri, 01 Aug 2008 05:05:08 +0000</pubDate>
		<dc:creator>Adam Presley</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[ExtJs]]></category>

		<guid isPermaLink="false">http://blog.adampresley.com/?p=176</guid>
		<description><![CDATA[I ran into an interesting problem tonight while working on one of my projects that just so happens to use a little bit of the ExtJs SDK. I had dropped an Ext.form.DateField onto a regular old HTML form for a bit of polish. When I started testing I began to notice strange behaviors when leaving [...]


Related posts:<ol><li><a href='http://blog.adampresley.com/2008/advanced-data-validation-using-extjs/' rel='bookmark' title='Permanent Link: Advanced Data Validation Using ExtJs'>Advanced Data Validation Using ExtJs</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>I ran into an interesting problem tonight while working on one of my projects that just so happens to use a little bit of the <a href="http://www.extjs.com" target="_blank">ExtJs SDK</a>. I had dropped an <a href="http://extjs.com/deploy/dev/docs/?class=Ext.form.DateField" target="_blank">Ext.form.DateField</a> onto a regular old HTML form for a bit of polish. When I started testing I began to notice strange behaviors when leaving the field (onBlur), or even when bringing up the date selector. The date would change at random!!</p>

<p>After a bit of searching on the <a href="http://extjs.com/forum/" target="_blank">Ext forums</a> I did find a couple of posts that indicated that this is a known issue, and that it has been fixed in the current Subversion build. In the meantime they did offer up a script you could include AFTER your Ext includes that would correct the issue in the current build (2.1). Below is a copy of that code for anyone who may be looking for it.</p>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/**
 * @file Special hotfix patch released by mystix on Ext development team
 * to fix known issues with the DateField class. Next release may see the
 * need to remove this.
 */</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// private</span>
Date.<span style="color: #660066;">createParser</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>format<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> funcName <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;parse&quot;</span> <span style="color: #339933;">+</span> Date.<span style="color: #660066;">parseFunctions</span>.<span style="color: #660066;">count</span><span style="color: #339933;">++;</span>
  <span style="color: #003366; font-weight: bold;">var</span> regexNum <span style="color: #339933;">=</span> Date.<span style="color: #660066;">parseRegexes</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> currentGroup <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
  Date.<span style="color: #660066;">parseFunctions</span><span style="color: #009900;">&#91;</span>format<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> funcName<span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #003366; font-weight: bold;">var</span> code <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;Date.&quot;</span> <span style="color: #339933;">+</span> funcName <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot; = function(input){<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;var y = -1, m = -1, d = -1, h = -1, i = -1, s = -1, ms = -1, o, z, u, v;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;input = String(input);var d = new Date();<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;y = d.getFullYear();<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;m = d.getMonth();<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;d = d.getDate();<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;var results = input.match(Date.parseRegexes[&quot;</span> <span style="color: #339933;">+</span> regexNum <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;]);<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;if (results &amp;&amp; results.length &gt; 0) {&quot;</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> regex <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #003366; font-weight: bold;">var</span> special <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> ch <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> format.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> <span style="color: #339933;">++</span>i<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      ch <span style="color: #339933;">=</span> format.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>special <span style="color: #339933;">&amp;&amp;</span> ch <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\\</span>&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          special <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
      <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>special<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          special <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
          regex <span style="color: #339933;">+=</span> String.<span style="color: #660066;">escape</span><span style="color: #009900;">&#40;</span>ch<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
      <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
          <span style="color: #003366; font-weight: bold;">var</span> obj <span style="color: #339933;">=</span> Date.<span style="color: #660066;">formatCodeToRegex</span><span style="color: #009900;">&#40;</span>ch<span style="color: #339933;">,</span> currentGroup<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          currentGroup <span style="color: #339933;">+=</span> obj.<span style="color: #660066;">g</span><span style="color: #339933;">;</span>
          regex <span style="color: #339933;">+=</span> obj.<span style="color: #660066;">s</span><span style="color: #339933;">;</span>
          <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>obj.<span style="color: #660066;">g</span> <span style="color: #339933;">&amp;&amp;</span> obj.<span style="color: #660066;">c</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
              code <span style="color: #339933;">+=</span> obj.<span style="color: #660066;">c</span><span style="color: #339933;">;</span>
          <span style="color: #009900;">&#125;</span>
      <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  code <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;if (u){<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;v = new Date(u * 1000);<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span> <span style="color: #006600; font-style: italic;">// give top priority to UNIX time</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;}else if (y &gt;= 0 &amp;&amp; m &gt;= 0 &amp;&amp; d &gt; 0 &amp;&amp; h &gt;= 0 &amp;&amp; i &gt;= 0 &amp;&amp; s &gt;= 0 &amp;&amp; ms &gt;= 0){<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;v = new Date(y, m, d, h, i, s, ms);<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;}else if (y &gt;= 0 &amp;&amp; m &gt;= 0 &amp;&amp; d &gt; 0 &amp;&amp; h &gt;= 0 &amp;&amp; i &gt;= 0 &amp;&amp; s &gt;= 0){<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;v = new Date(y, m, d, h, i, s);<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;}else if (y &gt;= 0 &amp;&amp; m &gt;= 0 &amp;&amp; d &gt; 0 &amp;&amp; h &gt;= 0 &amp;&amp; i &gt;= 0){<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;v = new Date(y, m, d, h, i);<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;}else if (y &gt;= 0 &amp;&amp; m &gt;= 0 &amp;&amp; d &gt; 0 &amp;&amp; h &gt;= 0){<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;v = new Date(y, m, d, h);<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;}else if (y &gt;= 0 &amp;&amp; m &gt;= 0 &amp;&amp; d &gt; 0){<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;v = new Date(y, m, d);<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;}else if (y &gt;= 0 &amp;&amp; m &gt;= 0){<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;v = new Date(y, m);<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;}else if (y &gt;= 0){<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;v = new Date(y);<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;}<span style="color: #000099; font-weight: bold;">\n</span>}<span style="color: #000099; font-weight: bold;">\n</span>return (v &amp;&amp; (z || o))?&quot;</span> <span style="color: #006600; font-style: italic;">// favour UTC offset over GMT offset</span>
      <span style="color: #339933;">+</span>     <span style="color: #3366CC;">&quot; (Ext.type(z) == 'number' ? v.add(Date.SECOND, -v.getTimezoneOffset() * 60 - z) :&quot;</span> <span style="color: #006600; font-style: italic;">// reset to UTC, then add offset</span>
      <span style="color: #339933;">+</span>         <span style="color: #3366CC;">&quot; v.add(Date.MINUTE, -v.getTimezoneOffset() + (sn == '+'? -1 : 1) * (hr * 60 + mn))) : v;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span> <span style="color: #006600; font-style: italic;">// reset to GMT, then add offset</span>
      <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;}&quot;</span><span style="color: #339933;">;</span>
&nbsp;
  Date.<span style="color: #660066;">parseRegexes</span><span style="color: #009900;">&#91;</span>regexNum<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;^&quot;</span> <span style="color: #339933;">+</span> regex <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;$&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;i&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#40;</span>code<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// private</span>
Ext.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span>Date.<span style="color: #660066;">parseCodes</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
    j<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
        g<span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>
        c<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;d = parseInt(results[{0}], 10);<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">,</span>
        s<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;(<span style="color: #000099; font-weight: bold;">\\</span>d{1,2})&quot;</span> <span style="color: #006600; font-style: italic;">// day of month without leading zeroes (1 - 31)</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    M<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">12</span><span style="color: #339933;">;</span> a.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>Date.<span style="color: #660066;">getShortMonthName</span><span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #339933;">++</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// get localised short month names</span>
        <span style="color: #000066; font-weight: bold;">return</span> Ext.<span style="color: #660066;">applyIf</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
            s<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;(&quot;</span> <span style="color: #339933;">+</span> a.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;|&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;)&quot;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> Date.<span style="color: #660066;">formatCodeToRegex</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;F&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    n<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
        g<span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>
        c<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;m = parseInt(results[{0}], 10) - 1;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">,</span>
        s<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;(<span style="color: #000099; font-weight: bold;">\\</span>d{1,2})&quot;</span> <span style="color: #006600; font-style: italic;">// month number without leading zeros (1 - 12)</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    o<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> Date.<span style="color: #660066;">formatCodeToRegex</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Y&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    g<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> Date.<span style="color: #660066;">formatCodeToRegex</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;G&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    h<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> Date.<span style="color: #660066;">formatCodeToRegex</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;H&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    P<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
      g<span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>
      c<span style="color: #339933;">:</span><span style="color: #009900;">&#91;</span>
          <span style="color: #3366CC;">&quot;o = results[{0}];&quot;</span><span style="color: #339933;">,</span>
          <span style="color: #3366CC;">&quot;var sn = o.substring(0,1);&quot;</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// get + / - sign</span>
          <span style="color: #3366CC;">&quot;var hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60);&quot;</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// get hours (performs minutes-to-hour conversion also, just in case)</span>
          <span style="color: #3366CC;">&quot;var mn = o.substring(4,6) % 60;&quot;</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// get minutes</span>
          <span style="color: #3366CC;">&quot;o = ((-12 &lt;= (hr*60 + mn)/60) &amp;&amp; ((hr*60 + mn)/60 &lt;= 14))? (sn + String.leftPad(hr, 2, '0') + String.leftPad(mn, 2, '0')) : null;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span> <span style="color: #006600; font-style: italic;">// -12hrs &lt;= GMT offset &lt;= 14hrs</span>
      <span style="color: #009900;">&#93;</span>.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
      s<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;([+<span style="color: #000099; font-weight: bold;">\-</span>]<span style="color: #000099; font-weight: bold;">\\</span>d{2}:<span style="color: #000099; font-weight: bold;">\\</span>d{2})&quot;</span> <span style="color: #006600; font-style: italic;">// GMT offset in hrs and mins (with colon separator)</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// private</span>
Date.<span style="color: #660066;">formatCodeToRegex</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>character<span style="color: #339933;">,</span> currentGroup<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// Note: currentGroup - position in regex result array (see notes for Date.parseCodes above)</span>
    <span style="color: #003366; font-weight: bold;">var</span> p <span style="color: #339933;">=</span> Date.<span style="color: #660066;">parseCodes</span><span style="color: #009900;">&#91;</span>character<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>p<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      p <span style="color: #339933;">=</span> Ext.<span style="color: #660066;">type</span><span style="color: #009900;">&#40;</span>p<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'function'</span><span style="color: #339933;">?</span> p<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> p<span style="color: #339933;">;</span>
      Date.<span style="color: #660066;">parseCodes</span><span style="color: #009900;">&#91;</span>character<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> p<span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// reassign function result to prevent repeated execution</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">return</span> p<span style="color: #339933;">?</span> Ext.<span style="color: #660066;">applyIf</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
      c<span style="color: #339933;">:</span> p.<span style="color: #660066;">c</span><span style="color: #339933;">?</span> String.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">c</span><span style="color: #339933;">,</span> currentGroup <span style="color: #339933;">||</span> <span style="color: #3366CC;">&quot;{0}&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> p.<span style="color: #660066;">c</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> p<span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
        g<span style="color: #339933;">:</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
        c<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>
        s<span style="color: #339933;">:</span>Ext.<span style="color: #660066;">escapeRe</span><span style="color: #009900;">&#40;</span>character<span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">// treat unrecognised characters as literals</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
Date.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">getGMTOffset</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>colon<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">getTimezoneOffset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;-&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;+&quot;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #339933;">+</span> String.<span style="color: #660066;">leftPad</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">abs</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">getTimezoneOffset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> <span style="color: #CC0000;">60</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;0&quot;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>colon <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;:&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #339933;">+</span> String.<span style="color: #660066;">leftPad</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">abs</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">getTimezoneOffset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">%</span> <span style="color: #CC0000;">60</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;0&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>



<p>Related posts:<ol><li><a href='http://blog.adampresley.com/2008/advanced-data-validation-using-extjs/' rel='bookmark' title='Permanent Link: Advanced Data Validation Using ExtJs'>Advanced Data Validation Using ExtJs</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.adampresley.com/2008/datefield-issues-with-extjs-21/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Advanced Data Validation Using ExtJs</title>
		<link>http://blog.adampresley.com/2008/advanced-data-validation-using-extjs/</link>
		<comments>http://blog.adampresley.com/2008/advanced-data-validation-using-extjs/#comments</comments>
		<pubDate>Thu, 08 May 2008 05:34:39 +0000</pubDate>
		<dc:creator>Adam Presley</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[ExtJs]]></category>

		<guid isPermaLink="false">http://blog.adampresley.com/?p=169</guid>
		<description><![CDATA[While working on my personal project tonight I finally got around to going over some of the new examples in the ExtJs documentation. In this case they are demonstrating having a form with a password field, and a confirmation password field, and how you can validate that the second password entered is the same as [...]


Related posts:<ol><li><a href='http://blog.adampresley.com/2008/datefield-issues-with-extjs-21/' rel='bookmark' title='Permanent Link: DateField Issues with ExtJs 2.1'>DateField Issues with ExtJs 2.1</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>While working on my personal project tonight I finally got around to going over some of the new examples in the <a href="http://www.extjs.com">ExtJs</a> <a href="http://extjs.com/deploy/dev/docs/">documentation</a>. In this case they are demonstrating having a form with a password field, and a confirmation password field, and how you can validate that the second password entered is the same as the first. That&#8217;s fine and dandy, but I did need it to do a little more. I need this validation to verify that the entered password is at least five characters, and contains at least one number or special character from a specific set.</p>

<p><span id="more-169"></span></p>

<p>So here is an excerpt of the form definitions. I have the first password box, and a second for confirmation. Notice the &#8220;vtype&#8221; is set to &#8220;password&#8221;. This is key.</p>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#123;</span>
   fieldLabel<span style="color: #339933;">:</span> <span style="color: #3366CC;">'Password'</span><span style="color: #339933;">,</span>
   id<span style="color: #339933;">:</span> <span style="color: #3366CC;">'password'</span><span style="color: #339933;">,</span>
   <span style="color: #000066;">name</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'password'</span><span style="color: #339933;">,</span>
   allowBlank<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
   xtype<span style="color: #339933;">:</span> <span style="color: #3366CC;">'textfield'</span><span style="color: #339933;">,</span>
   inputType<span style="color: #339933;">:</span> <span style="color: #3366CC;">'password'</span><span style="color: #339933;">,</span>
   vtype<span style="color: #339933;">:</span> <span style="color: #3366CC;">'password'</span><span style="color: #339933;">,</span>
   width<span style="color: #339933;">:</span> <span style="color: #CC0000;">200</span><span style="color: #339933;">,</span>
   maxLength<span style="color: #339933;">:</span> <span style="color: #CC0000;">64</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
<span style="color: #009900;">&#123;</span>
   fieldLabel<span style="color: #339933;">:</span> <span style="color: #3366CC;">'Confirm'</span><span style="color: #339933;">,</span>
   id<span style="color: #339933;">:</span> <span style="color: #3366CC;">'passwordConfirm'</span><span style="color: #339933;">,</span>
   <span style="color: #000066;">name</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'passwordConfirm'</span><span style="color: #339933;">,</span>
   xtype<span style="color: #339933;">:</span> <span style="color: #3366CC;">'textfield'</span><span style="color: #339933;">,</span>
   inputType<span style="color: #339933;">:</span> <span style="color: #3366CC;">'password'</span><span style="color: #339933;">,</span>
   vtype<span style="color: #339933;">:</span> <span style="color: #3366CC;">'password'</span><span style="color: #339933;">,</span>
   allowBlank<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
   width<span style="color: #339933;">:</span> <span style="color: #CC0000;">200</span><span style="color: #339933;">,</span>
   maxLength<span style="color: #339933;">:</span> <span style="color: #CC0000;">64</span><span style="color: #339933;">,</span>
   initialPasswordField<span style="color: #339933;">:</span> <span style="color: #3366CC;">'password'</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>


<p>Now, prior to this you need to define the behavior for the password validation. This is done by vtypes. In ExtJs a vtype is basically an object with custom data validation functions that return true or false upon success of validation. They also include a message to display in a QuickTip when a data validation error occurs. Here is the code I used to validate the passwords according to the rules mentioned above.</p>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">Ext.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span>Ext.<span style="color: #660066;">form</span>.<span style="color: #660066;">VTypes</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
   password<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>value<span style="color: #339933;">,</span> field<span style="color: #009900;">&#41;</span>
   <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>field.<span style="color: #660066;">initialPasswordField</span><span style="color: #009900;">&#41;</span>
      <span style="color: #009900;">&#123;</span>
         <span style="color: #003366; font-weight: bold;">var</span> pwd <span style="color: #339933;">=</span> Ext.<span style="color: #660066;">getCmp</span><span style="color: #009900;">&#40;</span>field.<span style="color: #660066;">initialPasswordField</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
         <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">passwordText</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'Confirmation does not match your intial password entry.'</span><span style="color: #339933;">;</span>
         <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>value <span style="color: #339933;">==</span> pwd.<span style="color: #660066;">getValue</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
&nbsp;
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">passwordText</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'Passwords must be at least 5 characters, containing either a number, or a valid special character (!@#$%^&amp;*()-_=+)'</span><span style="color: #339933;">;</span>
&nbsp;
      <span style="color: #003366; font-weight: bold;">var</span> hasSpecial <span style="color: #339933;">=</span> value.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[0-9!@#\$%\^&amp;\*\(\)\-_=\+]+/i</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #003366; font-weight: bold;">var</span> hasLength <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>value.<span style="color: #660066;">length</span> <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;=</span> <span style="color: #CC0000;">5</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
      <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>hasSpecial <span style="color: #339933;">&amp;&amp;</span> hasLength<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
   passwordText<span style="color: #339933;">:</span> <span style="color: #3366CC;">'Passwords must be at least 5 characters, containing either a number, or a valid special character (!@#$%^&amp;*()-_=+)'</span><span style="color: #339933;">,</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>


<p>If you aren&#8217;t familiar with Ext.apply this is a function that takes two objects and combines them. And here is no exception. We are combining a new object with <strong>OUR</strong> definition of the password validation with the existing VTypes object.</p>

<p>If you noticed the property &#8220;initialPasswordField&#8221; in the confirmation field, you&#8217;ll see that the first thing our password validation function does is check to see if the form field has this property. If it does that means we are validating data for the confirmation field, and we want to make sure it matches the first password box.</p>

<p>If the current field being validated is not the confirmation field, but instead the initial password field, I am defining two variables: <em>hasSpecial</em>, and <em>hasLength</em>. These are the two criteria I am testing against. The <em>hasLength</em> is obvious; true or false if the value is greater than or equal to five characters in length. The <em>hasSpecial</em> is simply a regular expression that checks to see if the value has at least one number, or one character in the list: <em>!@#$%^&amp;*()-_=+</em>.</p>

<p>Also notice the <em>passwordText</em> property. This is the default message to use when the data validation fails. You will also see that I am changing the password text based on which field you are working with when the data validation occurs.</p>

<p>I, for one, am quite excited about the power and flexibility of how data validation and vtypes works with ExtJs. Cheers, and happy coding!</p>


<p>Related posts:<ol><li><a href='http://blog.adampresley.com/2008/datefield-issues-with-extjs-21/' rel='bookmark' title='Permanent Link: DateField Issues with ExtJs 2.1'>DateField Issues with ExtJs 2.1</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.adampresley.com/2008/advanced-data-validation-using-extjs/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>
