projects / roojs1 / blob
? search:


5826f20cb2cec4c6e9cab206fb9b7651597218ed
[roojs1] / docs / src / Roo_form_Field.js.html
1 <html><head><title>Roo/form/Field.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
2  * Based on:
3  * Ext JS Library 1.1.1
4  * Copyright(c) 2006-2007, Ext JS, LLC.
5  *
6  * Originally Released Under LGPL - original licence link has changed is not relivant.
7  *
8  * Fork - LGPL
9  * &lt;script type=&quot;text/javascript&quot;&gt;
10  */
11
12 /**
13  * @class Roo.form.Field
14  * @extends Roo.BoxComponent
15  * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
16  * @constructor
17  * Creates a new Field
18  * @param {Object} config Configuration options
19  */
20 </span><span class="jsdoc-var">Roo.form.Field </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
21     </span><span class="jsdoc-var">Roo.form.Field.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
22 };
23
24 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.Field</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.BoxComponent</span><span class="jsdoc-syntax">,  {
25     </span><span class="jsdoc-comment">/**
26      * @cfg {String} fieldLabel Label to use when rendering a form.
27      */
28        /**
29      * @cfg {String} qtip Mouse over tip
30      */
31
32     /**
33      * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to &quot;x-form-invalid&quot;)
34      */
35     </span><span class="jsdoc-var">invalidClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-form-invalid&quot;</span><span class="jsdoc-syntax">,
36     </span><span class="jsdoc-comment">/**
37      * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided (defaults to &quot;The value in this field is invalid&quot;)
38      */
39     </span><span class="jsdoc-var">invalidText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;The value in this field is invalid&quot;</span><span class="jsdoc-syntax">,
40     </span><span class="jsdoc-comment">/**
41      * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to &quot;x-form-focus&quot;)
42      */
43     </span><span class="jsdoc-var">focusClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-form-focus&quot;</span><span class="jsdoc-syntax">,
44     </span><span class="jsdoc-comment">/**
45      * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
46       automatic validation (defaults to &quot;keyup&quot;).
47      */
48     </span><span class="jsdoc-var">validationEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;keyup&quot;</span><span class="jsdoc-syntax">,
49     </span><span class="jsdoc-comment">/**
50      * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
51      */
52     </span><span class="jsdoc-var">validateOnBlur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
53     </span><span class="jsdoc-comment">/**
54      * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
55      */
56     </span><span class="jsdoc-var">validationDelay </span><span class="jsdoc-syntax">: 250,
57     </span><span class="jsdoc-comment">/**
58      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
59      * {tag: &quot;input&quot;, type: &quot;text&quot;, size: &quot;20&quot;, autocomplete: &quot;off&quot;})
60      */
61     </span><span class="jsdoc-var">defaultAutoCreate </span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;input&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;text&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;20&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">autocomplete</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;new-password&quot;</span><span class="jsdoc-syntax">},
62     </span><span class="jsdoc-comment">/**
63      * @cfg {String} fieldClass The default CSS class for the field (defaults to &quot;x-form-field&quot;)
64      */
65     </span><span class="jsdoc-var">fieldClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-form-field&quot;</span><span class="jsdoc-syntax">,
66     </span><span class="jsdoc-comment">/**
67      * @cfg {String} msgTarget The location where error text should display.  Should be one of the following values (defaults to 'qtip'):
68      *&lt;pre&gt;
69 Value         Description
70 -----------   ----------------------------------------------------------------------
71 qtip          Display a quick tip when the user hovers over the field
72 title         Display a default browser title attribute popup
73 under         Add a block div beneath the field containing the error text
74 side          Add an error icon to the right of the field with a popup on hover
75 [element id]  Add the error text directly to the innerHTML of the specified element
76 &lt;/pre&gt;
77      */
78     </span><span class="jsdoc-var">msgTarget </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'qtip'</span><span class="jsdoc-syntax">,
79     </span><span class="jsdoc-comment">/**
80      * @cfg {String} msgFx &lt;b&gt;Experimental&lt;/b&gt; The effect used when displaying a validation message under the field (defaults to 'normal').
81      */
82     </span><span class="jsdoc-var">msgFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'normal'</span><span class="jsdoc-syntax">,
83
84     </span><span class="jsdoc-comment">/**
85      * @cfg {Boolean} readOnly True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
86      */
87     </span><span class="jsdoc-var">readOnly </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
88
89     </span><span class="jsdoc-comment">/**
90      * @cfg {Boolean} disabled True to disable the field (defaults to false).
91      */
92     </span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
93
94     </span><span class="jsdoc-comment">/**
95      * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to &quot;text&quot;).
96      */
97     </span><span class="jsdoc-var">inputType </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
98
99     </span><span class="jsdoc-comment">/**
100      * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
101          */
102         </span><span class="jsdoc-var">tabIndex </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
103
104     </span><span class="jsdoc-comment">// private
105     </span><span class="jsdoc-var">isFormField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
106
107     </span><span class="jsdoc-comment">// private
108     </span><span class="jsdoc-var">hasFocus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
109     </span><span class="jsdoc-comment">/**
110      * @property {Roo.Element} fieldEl
111      * Element Containing the rendered Field (with label etc.)
112      */
113     /**
114      * @cfg {Mixed} value A value to initialize this field with.
115      */
116     </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
117
118     </span><span class="jsdoc-comment">/**
119      * @cfg {String} name The field's HTML name attribute.
120      */
121     /**
122      * @cfg {String} cls A CSS class to apply to the field's underlying element.
123      */
124     // private
125     </span><span class="jsdoc-var">loadedValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
126
127
128         </span><span class="jsdoc-comment">// private ??
129         </span><span class="jsdoc-var">initComponent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
130         </span><span class="jsdoc-var">Roo.form.Field.superclass.initComponent.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
131         </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
132             </span><span class="jsdoc-comment">/**
133              * @event focus
134              * Fires when this field receives input focus.
135              * @param {Roo.form.Field} this
136              */
137             </span><span class="jsdoc-var">focus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
138             </span><span class="jsdoc-comment">/**
139              * @event blur
140              * Fires when this field loses input focus.
141              * @param {Roo.form.Field} this
142              */
143             </span><span class="jsdoc-var">blur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
144             </span><span class="jsdoc-comment">/**
145              * @event specialkey
146              * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
147              * {@link Roo.EventObject#getKey} to determine which key was pressed.
148              * @param {Roo.form.Field} this
149              * @param {Roo.EventObject} e The event object
150              */
151             </span><span class="jsdoc-var">specialkey </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
152             </span><span class="jsdoc-comment">/**
153              * @event change
154              * Fires just before the field blurs if the field value has changed.
155              * @param {Roo.form.Field} this
156              * @param {Mixed} newValue The new value
157              * @param {Mixed} oldValue The original value
158              */
159             </span><span class="jsdoc-var">change </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
160             </span><span class="jsdoc-comment">/**
161              * @event invalid
162              * Fires after the field has been marked as invalid.
163              * @param {Roo.form.Field} this
164              * @param {String} msg The validation message
165              */
166             </span><span class="jsdoc-var">invalid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
167             </span><span class="jsdoc-comment">/**
168              * @event valid
169              * Fires after the field has been validated with no errors.
170              * @param {Roo.form.Field} this
171              */
172             </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
173              </span><span class="jsdoc-comment">/**
174              * @event keyup
175              * Fires after the key up
176              * @param {Roo.form.Field} this
177              * @param {Roo.EventObject}  e The event Object
178              */
179             </span><span class="jsdoc-var">keyup </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
180         </span><span class="jsdoc-syntax">});
181     },
182
183     </span><span class="jsdoc-comment">/**
184      * Returns the name attribute of the field if available
185      * @return {String} name The field name
186      */
187     </span><span class="jsdoc-var">getName</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
188          </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.rendered </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.el.dom.name </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.el.dom.name </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.hiddenName </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
189     },
190
191     </span><span class="jsdoc-comment">// private
192     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
193         </span><span class="jsdoc-var">Roo.form.Field.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
194         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
195             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getAutoCreate</span><span class="jsdoc-syntax">();
196             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cfg.name</span><span class="jsdoc-syntax">){
197                 </span><span class="jsdoc-var">cfg.name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">;
198             }
199             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cfg.name.length</span><span class="jsdoc-syntax">) {
200                 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.name</span><span class="jsdoc-syntax">;
201             }
202             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inputType</span><span class="jsdoc-syntax">){
203                 </span><span class="jsdoc-var">cfg.type </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.inputType</span><span class="jsdoc-syntax">;
204             }
205             </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ct.createChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
206         }
207         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.dom.type</span><span class="jsdoc-syntax">;
208         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">){
209             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'password'</span><span class="jsdoc-syntax">){
210                 </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'text'</span><span class="jsdoc-syntax">;
211             }
212             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-form-'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">);
213         }
214         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.readOnly</span><span class="jsdoc-syntax">){
215             </span><span class="jsdoc-var">this.el.dom.readOnly </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
216         }
217         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabIndex </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
218             </span><span class="jsdoc-var">this.el.dom.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tabIndex'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.tabIndex</span><span class="jsdoc-syntax">);
219         }
220
221         </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">this.fieldClass</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">]);
222         </span><span class="jsdoc-var">this.initValue</span><span class="jsdoc-syntax">();
223     },
224
225     </span><span class="jsdoc-comment">/**
226      * Apply the behaviors of this component to an existing element. &lt;b&gt;This is used instead of render().&lt;/b&gt;
227      * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
228      * @return {Roo.form.Field} this
229      */
230     </span><span class="jsdoc-var">applyTo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">){
231         </span><span class="jsdoc-var">this.allowDomMove </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
232         </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">);
233         </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom.parentNode</span><span class="jsdoc-syntax">);
234         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
235     },
236
237     </span><span class="jsdoc-comment">// private
238     </span><span class="jsdoc-var">initValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
239         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
240             </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">);
241         }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom.value.length </span><span class="jsdoc-syntax">&gt; 0){
242             </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom.value</span><span class="jsdoc-syntax">);
243         }
244     },
245
246     </span><span class="jsdoc-comment">/**
247      * Returns true if this field has been changed since it was originally loaded and is not disabled.
248      * DEPRICATED  - it never worked well - use hasChanged/resetHasChanged.
249      */
250     </span><span class="jsdoc-var">isDirty </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
251         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">) {
252             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
253         }
254         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">()) !== </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.originalValue</span><span class="jsdoc-syntax">);
255     },
256
257     </span><span class="jsdoc-comment">/**
258      * stores the current value in loadedValue
259      */
260     </span><span class="jsdoc-var">resetHasChanged </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
261     {
262         </span><span class="jsdoc-var">this.loadedValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">());
263     },
264     </span><span class="jsdoc-comment">/**
265      * checks the current value against the 'loaded' value.
266      * Note - will return false if 'resetHasChanged' has not been called first.
267      */
268     </span><span class="jsdoc-var">hasChanged </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
269     {
270         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.readOnly</span><span class="jsdoc-syntax">) {
271             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
272         }
273         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.loadedValue </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">()) !== </span><span class="jsdoc-var">this.loadedValue</span><span class="jsdoc-syntax">;
274     },
275
276
277
278     </span><span class="jsdoc-comment">// private
279     </span><span class="jsdoc-var">afterRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
280         </span><span class="jsdoc-var">Roo.form.Field.superclass.afterRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
281         </span><span class="jsdoc-var">this.initEvents</span><span class="jsdoc-syntax">();
282     },
283
284     </span><span class="jsdoc-comment">// private
285     </span><span class="jsdoc-var">fireKey </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
286         </span><span class="jsdoc-comment">//Roo.log('field ' + e.getKey());
287         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.isNavKeyPress</span><span class="jsdoc-syntax">()){
288             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;specialkey&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
289         }
290     },
291
292     </span><span class="jsdoc-comment">/**
293      * Resets the current field value to the originally loaded value and clears any validation messages
294      */
295     </span><span class="jsdoc-var">reset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
296         </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resetValue</span><span class="jsdoc-syntax">);
297         </span><span class="jsdoc-var">this.originalValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">();
298         </span><span class="jsdoc-var">this.clearInvalid</span><span class="jsdoc-syntax">();
299     },
300
301     </span><span class="jsdoc-comment">// private
302     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
303         </span><span class="jsdoc-comment">// safari killled keypress - so keydown is now used..
304         </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot; </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.fireKey</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
305         </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;focus&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onFocus</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
306         </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;blur&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onBlur</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
307         </span><span class="jsdoc-var">this.el.relayEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'keyup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
308
309         </span><span class="jsdoc-comment">// reference to original value for reset
310         </span><span class="jsdoc-var">this.originalValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">();
311         </span><span class="jsdoc-var">this.resetValue </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">();
312     },
313
314     </span><span class="jsdoc-comment">// private
315     </span><span class="jsdoc-var">onFocus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
316         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.isOpera </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.focusClass</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// don't touch in Opera
317             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.focusClass</span><span class="jsdoc-syntax">);
318         }
319         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hasFocus</span><span class="jsdoc-syntax">){
320             </span><span class="jsdoc-var">this.hasFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
321             </span><span class="jsdoc-var">this.startValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">();
322             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;focus&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
323         }
324     },
325
326     </span><span class="jsdoc-var">beforeBlur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
327
328     </span><span class="jsdoc-comment">// private
329     </span><span class="jsdoc-var">onBlur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
330         </span><span class="jsdoc-var">this.beforeBlur</span><span class="jsdoc-syntax">();
331         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.isOpera </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.focusClass</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// don't touch in Opera
332             </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.focusClass</span><span class="jsdoc-syntax">);
333         }
334         </span><span class="jsdoc-var">this.hasFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
335         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.validationEvent </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.validateOnBlur </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.validationEvent </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;blur&quot;</span><span class="jsdoc-syntax">){
336             </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
337         }
338         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">();
339         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.startValue</span><span class="jsdoc-syntax">)){
340             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'change'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.startValue</span><span class="jsdoc-syntax">);
341         }
342         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;blur&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
343     },
344
345     </span><span class="jsdoc-comment">/**
346      * Returns whether or not the field value is currently valid
347      * @param {Boolean} preventMark True to disable marking the field invalid
348      * @return {Boolean} True if the value is valid, else false
349      */
350     </span><span class="jsdoc-var">isValid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">preventMark</span><span class="jsdoc-syntax">){
351         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
352             </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
353         }
354         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">restore </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.preventMark</span><span class="jsdoc-syntax">;
355         </span><span class="jsdoc-var">this.preventMark </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">preventMark </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
356         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.validateValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.processValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getRawValue</span><span class="jsdoc-syntax">()));
357         </span><span class="jsdoc-var">this.preventMark </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">restore</span><span class="jsdoc-syntax">;
358         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
359     },
360
361     </span><span class="jsdoc-comment">/**
362      * Validates the field value
363      * @return {Boolean} True if the value is valid, else false
364      */
365     </span><span class="jsdoc-var">validate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
366         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.validateValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.processValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getRawValue</span><span class="jsdoc-syntax">()))){
367             </span><span class="jsdoc-var">this.clearInvalid</span><span class="jsdoc-syntax">();
368             </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
369         }
370         </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
371     },
372
373     </span><span class="jsdoc-var">processValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
374         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
375     },
376
377     </span><span class="jsdoc-comment">// private
378     // Subclasses should provide the validation implementation by overriding this
379     </span><span class="jsdoc-var">validateValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
380         </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
381     },
382
383     </span><span class="jsdoc-comment">/**
384      * Mark this field as invalid
385      * @param {String} msg The validation message
386      */
387     </span><span class="jsdoc-var">markInvalid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">msg</span><span class="jsdoc-syntax">){
388         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.rendered </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.preventMark</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// not rendered
389             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
390         }
391
392         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">obj </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.combo</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.combo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// fix the combox array!!
393
394         </span><span class="jsdoc-var">obj.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.invalidClass</span><span class="jsdoc-syntax">);
395         </span><span class="jsdoc-var">msg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">msg </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.invalidText</span><span class="jsdoc-syntax">;
396         </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.msgTarget</span><span class="jsdoc-syntax">){
397             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'qtip'</span><span class="jsdoc-syntax">:
398                 </span><span class="jsdoc-var">obj.el.dom.qtip </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">msg</span><span class="jsdoc-syntax">;
399                 </span><span class="jsdoc-var">obj.el.dom.qclass </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'x-form-invalid-tip'</span><span class="jsdoc-syntax">;
400                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.QuickTips</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// fix for floating editors interacting with DND
401                     </span><span class="jsdoc-var">Roo.QuickTips.enable</span><span class="jsdoc-syntax">();
402                 }
403                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
404             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'title'</span><span class="jsdoc-syntax">:
405                 </span><span class="jsdoc-var">this.el.dom.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">msg</span><span class="jsdoc-syntax">;
406                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
407             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'under'</span><span class="jsdoc-syntax">:
408                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.errorEl</span><span class="jsdoc-syntax">){
409                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">elp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.findParent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.x-form-element'</span><span class="jsdoc-syntax">, 5, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
410                     </span><span class="jsdoc-var">this.errorEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">elp.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'x-form-invalid-msg'</span><span class="jsdoc-syntax">});
411                     </span><span class="jsdoc-var">this.errorEl.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">elp.getWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)-20);
412                 }
413                 </span><span class="jsdoc-var">this.errorEl.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">msg</span><span class="jsdoc-syntax">);
414                 </span><span class="jsdoc-var">Roo.form.Field.msgFx</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.msgFx</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.show</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.errorEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
415                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
416             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'side'</span><span class="jsdoc-syntax">:
417                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.errorIcon</span><span class="jsdoc-syntax">){
418                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">elp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.findParent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.x-form-element'</span><span class="jsdoc-syntax">, 5, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
419                     </span><span class="jsdoc-var">this.errorIcon </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">elp.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'x-form-invalid-icon'</span><span class="jsdoc-syntax">});
420                 }
421                 </span><span class="jsdoc-var">this.alignErrorIcon</span><span class="jsdoc-syntax">();
422                 </span><span class="jsdoc-var">this.errorIcon.dom.qtip </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">msg</span><span class="jsdoc-syntax">;
423                 </span><span class="jsdoc-var">this.errorIcon.dom.qclass </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'x-form-invalid-tip'</span><span class="jsdoc-syntax">;
424                 </span><span class="jsdoc-var">this.errorIcon.show</span><span class="jsdoc-syntax">();
425                 </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.alignErrorIcon</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
426                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
427             </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">:
428                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.msgTarget</span><span class="jsdoc-syntax">);
429                 </span><span class="jsdoc-var">t.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">msg</span><span class="jsdoc-syntax">;
430                 </span><span class="jsdoc-var">t.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.msgDisplay</span><span class="jsdoc-syntax">;
431                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
432         }
433         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'invalid'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">msg</span><span class="jsdoc-syntax">);
434     },
435
436     </span><span class="jsdoc-comment">// private
437     </span><span class="jsdoc-var">alignErrorIcon </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
438         </span><span class="jsdoc-var">this.errorIcon.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'tl-tr'</span><span class="jsdoc-syntax">, [2, 0]);
439     },
440
441     </span><span class="jsdoc-comment">/**
442      * Clear any invalid styles/messages for this field
443      */
444     </span><span class="jsdoc-var">clearInvalid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
445         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.rendered </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.preventMark</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// not rendered
446             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
447         }
448         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">obj </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.combo</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.combo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// fix the combox array!!
449
450         </span><span class="jsdoc-var">obj.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.invalidClass</span><span class="jsdoc-syntax">);
451         </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.msgTarget</span><span class="jsdoc-syntax">){
452             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'qtip'</span><span class="jsdoc-syntax">:
453                 </span><span class="jsdoc-var">obj.el.dom.qtip </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
454                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
455             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'title'</span><span class="jsdoc-syntax">:
456                 </span><span class="jsdoc-var">this.el.dom.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
457                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
458             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'under'</span><span class="jsdoc-syntax">:
459                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.errorEl</span><span class="jsdoc-syntax">){
460                     </span><span class="jsdoc-var">Roo.form.Field.msgFx</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.msgFx</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.hide</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.errorEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
461                 }
462                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
463             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'side'</span><span class="jsdoc-syntax">:
464                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.errorIcon</span><span class="jsdoc-syntax">){
465                     </span><span class="jsdoc-var">this.errorIcon.dom.qtip </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
466                     </span><span class="jsdoc-var">this.errorIcon.hide</span><span class="jsdoc-syntax">();
467                     </span><span class="jsdoc-var">this.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.alignErrorIcon</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
468                 }
469                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
470             </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">:
471                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.msgTarget</span><span class="jsdoc-syntax">);
472                 </span><span class="jsdoc-var">t.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
473                 </span><span class="jsdoc-var">t.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'none'</span><span class="jsdoc-syntax">;
474                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
475         }
476         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'valid'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
477     },
478
479     </span><span class="jsdoc-comment">/**
480      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
481      * @return {Mixed} value The field value
482      */
483     </span><span class="jsdoc-var">getRawValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
484         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getValue</span><span class="jsdoc-syntax">();
485
486         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
487     },
488
489     </span><span class="jsdoc-comment">/**
490      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
491      * @return {Mixed} value The field value
492      */
493     </span><span class="jsdoc-var">getValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
494         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getValue</span><span class="jsdoc-syntax">();
495
496         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
497     },
498
499     </span><span class="jsdoc-comment">/**
500      * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
501      * @param {Mixed} value The value to set
502      */
503     </span><span class="jsdoc-var">setRawValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
504         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.dom.value </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
505     },
506
507     </span><span class="jsdoc-comment">/**
508      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
509      * @param {Mixed} value The value to set
510      */
511     </span><span class="jsdoc-var">setValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
512         </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
513         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
514             </span><span class="jsdoc-var">this.el.dom.value </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
515              </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
516         }
517     },
518
519     </span><span class="jsdoc-var">adjustSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
520         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.form.Field.superclass.adjustSize.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
521         </span><span class="jsdoc-var">s.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom.tagName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s.width</span><span class="jsdoc-syntax">);
522         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">;
523     },
524
525     </span><span class="jsdoc-var">adjustWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">){
526         </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tag.toLowerCase</span><span class="jsdoc-syntax">();
527         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'number' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.isStrict </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">Roo.isSafari</span><span class="jsdoc-syntax">){
528             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'input' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'textarea'</span><span class="jsdoc-syntax">)){
529                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">){
530                     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+ 2;
531                 }
532                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'textarea'</span><span class="jsdoc-syntax">){
533                     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">-2;
534                 }
535             }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isOpera</span><span class="jsdoc-syntax">){
536                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">){
537                     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+ 2;
538                 }
539                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'textarea'</span><span class="jsdoc-syntax">){
540                     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">-2;
541                 }
542             }
543         }
544         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
545     }
546 });
547
548
549 </span><span class="jsdoc-comment">// anything other than normal should be considered experimental
550 </span><span class="jsdoc-var">Roo.form.Field.msgFx </span><span class="jsdoc-syntax">= {
551     </span><span class="jsdoc-var">normal </span><span class="jsdoc-syntax">: {
552         </span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">msgEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">){
553             </span><span class="jsdoc-var">msgEl.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">);
554         },
555
556         </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">msgEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">){
557             </span><span class="jsdoc-var">msgEl.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
558         }
559     },
560
561     </span><span class="jsdoc-var">slide </span><span class="jsdoc-syntax">: {
562         </span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">msgEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">){
563             </span><span class="jsdoc-var">msgEl.slideIn</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'t'</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">stopFx</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">});
564         },
565
566         </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">msgEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">){
567             </span><span class="jsdoc-var">msgEl.slideOut</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'t'</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">stopFx</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">useDisplay</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">});
568         }
569     },
570
571     </span><span class="jsdoc-var">slideRight </span><span class="jsdoc-syntax">: {
572         </span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">msgEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">){
573             </span><span class="jsdoc-var">msgEl.fixDisplay</span><span class="jsdoc-syntax">();
574             </span><span class="jsdoc-var">msgEl.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'tl-tr'</span><span class="jsdoc-syntax">);
575             </span><span class="jsdoc-var">msgEl.slideIn</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'l'</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">stopFx</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">});
576         },
577
578         </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">msgEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">){
579             </span><span class="jsdoc-var">msgEl.slideOut</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'l'</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">stopFx</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">useDisplay</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">});
580         }
581     }
582 };</span></code></body></html>
RooJS - Version 1