projects / roojs1 / blob
? search:


1ebbb25bbafb2ff9499cbb204a6421ddcd450c05
[roojs1] / docs / src / Roo_form_Form.js.html
1 <html><head><title>Roo/form/Form.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.Form
14  * @extends Roo.form.BasicForm
15  * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
16  * @constructor
17  * @param {Object} config Configuration options
18  */
19 </span><span class="jsdoc-var">Roo.form.Form </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">){
20     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">=  [];
21     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">) {
22         </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">;
23         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">;
24     }
25
26
27     </span><span class="jsdoc-var">Roo.form.Form.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
28     </span><span class="jsdoc-var">this.url </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.url </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.action</span><span class="jsdoc-syntax">;
29     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.root</span><span class="jsdoc-syntax">){
30         </span><span class="jsdoc-var">this.root </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.form.Layout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.applyIf</span><span class="jsdoc-syntax">({
31             </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">()
32         }, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">));
33     }
34     </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.root</span><span class="jsdoc-syntax">;
35     </span><span class="jsdoc-comment">/**
36      * Array of all the buttons that have been added to this form via {@link addButton}
37      * @type Array
38      */
39     </span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">= [];
40     </span><span class="jsdoc-var">this.allItems </span><span class="jsdoc-syntax">= [];
41     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
42         </span><span class="jsdoc-comment">/**
43          * @event clientvalidation
44          * If the monitorValid config option is true, this event fires repetitively to notify of valid state
45          * @param {Form} this
46          * @param {Boolean} valid true if the form has passed client-side validation
47          */
48         </span><span class="jsdoc-var">clientvalidation</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
49         </span><span class="jsdoc-comment">/**
50          * @event rendered
51          * Fires when the form is rendered
52          * @param {Roo.form.Form} form
53          */
54         </span><span class="jsdoc-var">rendered </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
55     </span><span class="jsdoc-syntax">});
56
57     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.progressUrl</span><span class="jsdoc-syntax">) {
58             </span><span class="jsdoc-comment">// push a hidden field onto the list of fields..
59             </span><span class="jsdoc-var">this.addxtype</span><span class="jsdoc-syntax">( {
60                     </span><span class="jsdoc-var">xns</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.form</span><span class="jsdoc-syntax">,
61                     </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Hidden'</span><span class="jsdoc-syntax">,
62                     </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'UPLOAD_IDENTIFIER'
63             </span><span class="jsdoc-syntax">});
64         }
65
66
67     </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xitems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.addxtype</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
68
69
70
71 };
72
73 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.Form</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.BasicForm</span><span class="jsdoc-syntax">, {
74     </span><span class="jsdoc-comment">/**
75      * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
76      */
77     /**
78      * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
79      */
80     /**
81      * @cfg {String} buttonAlign Valid values are &quot;left,&quot; &quot;center&quot; and &quot;right&quot; (defaults to &quot;center&quot;)
82      */
83     </span><span class="jsdoc-var">buttonAlign</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">,
84
85     </span><span class="jsdoc-comment">/**
86      * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
87      */
88     </span><span class="jsdoc-var">minButtonWidth</span><span class="jsdoc-syntax">:75,
89
90     </span><span class="jsdoc-comment">/**
91      * @cfg {String} labelAlign Valid values are &quot;left,&quot; &quot;top&quot; and &quot;right&quot; (defaults to &quot;left&quot;).
92      * This property cascades to child containers if not set.
93      */
94     </span><span class="jsdoc-var">labelAlign</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
95
96     </span><span class="jsdoc-comment">/**
97      * @cfg {Boolean} monitorValid If true the form monitors its valid state &lt;b&gt;client-side&lt;/b&gt; and
98      * fires a looping event with that state. This is required to bind buttons to the valid
99      * state using the config value formBind:true on the button.
100      */
101     </span><span class="jsdoc-var">monitorValid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
102
103     </span><span class="jsdoc-comment">/**
104      * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
105      */
106     </span><span class="jsdoc-var">monitorPoll </span><span class="jsdoc-syntax">: 200,
107
108     </span><span class="jsdoc-comment">/**
109      * @cfg {String} progressUrl - Url to return progress data 
110      */
111
112     </span><span class="jsdoc-var">progressUrl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
113     </span><span class="jsdoc-comment">/**
114      * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
115      * sending a formdata with extra parameters - eg uploaded elements.
116      */
117
118     </span><span class="jsdoc-var">formData </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
119
120     </span><span class="jsdoc-comment">/**
121      * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
122      * fields are added and the column is closed. If no fields are passed the column remains open
123      * until end() is called.
124      * @param {Object} config The config to pass to the column
125      * @param {Field} field1 (optional)
126      * @param {Field} field2 (optional)
127      * @param {Field} etc (optional)
128      * @return Column The column container object
129      */
130     </span><span class="jsdoc-var">column </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
131         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">col </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.form.Column</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
132         </span><span class="jsdoc-var">this.start</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">);
133         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments.length </span><span class="jsdoc-syntax">&gt; 1){ </span><span class="jsdoc-comment">// duplicate code required because of Opera
134             </span><span class="jsdoc-var">this.add.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Array.prototype.slice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 1));
135             </span><span class="jsdoc-var">this.end</span><span class="jsdoc-syntax">();
136         }
137         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">;
138     },
139
140     </span><span class="jsdoc-comment">/**
141      * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
142      * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
143      * until end() is called.
144      * @param {Object} config The config to pass to the fieldset
145      * @param {Field} field1 (optional)
146      * @param {Field} field2 (optional)
147      * @param {Field} etc (optional)
148      * @return FieldSet The fieldset container object
149      */
150     </span><span class="jsdoc-var">fieldset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
151         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.form.FieldSet</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
152         </span><span class="jsdoc-var">this.start</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fs</span><span class="jsdoc-syntax">);
153         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments.length </span><span class="jsdoc-syntax">&gt; 1){ </span><span class="jsdoc-comment">// duplicate code required because of Opera
154             </span><span class="jsdoc-var">this.add.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Array.prototype.slice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 1));
155             </span><span class="jsdoc-var">this.end</span><span class="jsdoc-syntax">();
156         }
157         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">fs</span><span class="jsdoc-syntax">;
158     },
159
160     </span><span class="jsdoc-comment">/**
161      * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
162      * fields are added and the container is closed. If no fields are passed the container remains open
163      * until end() is called.
164      * @param {Object} config The config to pass to the Layout
165      * @param {Field} field1 (optional)
166      * @param {Field} field2 (optional)
167      * @param {Field} etc (optional)
168      * @return Layout The container object
169      */
170     </span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
171         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.form.Layout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
172         </span><span class="jsdoc-var">this.start</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">);
173         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments.length </span><span class="jsdoc-syntax">&gt; 1){ </span><span class="jsdoc-comment">// duplicate code required because of Opera
174             </span><span class="jsdoc-var">this.add.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Array.prototype.slice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 1));
175             </span><span class="jsdoc-var">this.end</span><span class="jsdoc-syntax">();
176         }
177         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">;
178     },
179
180     </span><span class="jsdoc-comment">/**
181      * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
182      * @param {Object} container A Roo.form.Layout or subclass of Layout
183      * @return {Form} this
184      */
185     </span><span class="jsdoc-var">start </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
186         </span><span class="jsdoc-comment">// cascade label info
187         </span><span class="jsdoc-var">Roo.applyIf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-string">'labelAlign'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.active.labelAlign</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'labelWidth'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.active.labelWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'itemCls'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.active.itemCls</span><span class="jsdoc-syntax">});
188         </span><span class="jsdoc-var">this.active.stack.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
189         </span><span class="jsdoc-var">c.ownerCt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.active</span><span class="jsdoc-syntax">;
190         </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
191         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
192     },
193
194     </span><span class="jsdoc-comment">/**
195      * Closes the current open container
196      * @return {Form} this
197      */
198     </span><span class="jsdoc-var">end </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
199         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.root</span><span class="jsdoc-syntax">){
200             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
201         }
202         </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.active.ownerCt</span><span class="jsdoc-syntax">;
203         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
204     },
205
206     </span><span class="jsdoc-comment">/**
207      * Add Roo.form components to the current open container (e.g. column, fieldset, etc.).  Fields added via this method
208      * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
209      * as the label of the field.
210      * @param {Field} field1
211      * @param {Field} field2 (optional)
212      * @param {Field} etc. (optional)
213      * @return {Form} this
214      */
215     </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
216         </span><span class="jsdoc-var">this.active.stack.push.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.active.stack</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
217         </span><span class="jsdoc-var">this.allItems.push.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allItems</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
218         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [];
219         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
220             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.isFormField</span><span class="jsdoc-syntax">){
221                 </span><span class="jsdoc-var">r.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
222             }
223         }
224         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.length </span><span class="jsdoc-syntax">&gt; 0){
225             </span><span class="jsdoc-var">Roo.form.Form.superclass.add.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">);
226         }
227         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
228     },
229
230
231
232
233
234      </span><span class="jsdoc-comment">/**
235      * Find any element that has been added to a form, using it's ID or name
236      * This can include framesets, columns etc. along with regular fields..
237      * @param {String} id - id or name to find.
238      
239      * @return {Element} e - or false if nothing found.
240      */
241     </span><span class="jsdoc-var">findbyId </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">)
242     {
243         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
244         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) {
245             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
246         }
247         </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allItems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">){
248             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f.id </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">f.name </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">){
249                 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">;
250                 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
251             }
252         });
253         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
254     },
255
256
257
258     </span><span class="jsdoc-comment">/**
259      * Render this form into the passed container. This should only be called once!
260      * @param {String/HTMLElement/Element} container The element this component should be rendered into
261      * @return {Form} this
262      */
263     </span><span class="jsdoc-var">render </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">)
264     {
265
266
267
268         </span><span class="jsdoc-var">ct </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">);
269         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.autoCreate </span><span class="jsdoc-syntax">|| {
270             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form'</span><span class="jsdoc-syntax">,
271             </span><span class="jsdoc-var">method </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.method </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'POST'</span><span class="jsdoc-syntax">,
272             </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">()
273         };
274         </span><span class="jsdoc-var">this.initEl</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct.createChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">));
275
276         </span><span class="jsdoc-var">this.root.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
277
278
279
280         </span><span class="jsdoc-var">this.items.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">){
281             </span><span class="jsdoc-var">f.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-form-el-'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">f.id</span><span class="jsdoc-syntax">);
282         });
283
284         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.buttons.length </span><span class="jsdoc-syntax">&gt; 0){
285             </span><span class="jsdoc-comment">// tables are required to maintain order and for correct IE layout
286             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'x-form-btns-ct'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: {
287                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-form-btns x-form-btns-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.buttonAlign</span><span class="jsdoc-syntax">,
288                 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'&lt;table cellspacing=&quot;0&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;div class=&quot;x-clear&quot;&gt;&lt;/div&gt;'
289             </span><span class="jsdoc-syntax">}}, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
290             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tb.getElementsByTagName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tr'</span><span class="jsdoc-syntax">)[0];
291             </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.buttons.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
292                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.buttons</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
293                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'td'</span><span class="jsdoc-syntax">);
294                 </span><span class="jsdoc-var">td.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'x-form-btn-td'</span><span class="jsdoc-syntax">;
295                 </span><span class="jsdoc-var">b.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tr.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">));
296             }
297         }
298         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.monitorValid</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// initialize after render
299             </span><span class="jsdoc-var">this.startMonitoring</span><span class="jsdoc-syntax">();
300         }
301         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'rendered'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
302         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
303     },
304
305     </span><span class="jsdoc-comment">/**
306      * Adds a button to the footer of the form - this &lt;b&gt;must&lt;/b&gt; be called before the form is rendered.
307      * @param {String/Object} config A string becomes the button text, an object can either be a Button config
308      * object or a valid Roo.DomHelper element config
309      * @param {Function} handler The function called when the button is clicked
310      * @param {Object} scope (optional) The scope of the handler function
311      * @return {Roo.Button}
312      */
313     </span><span class="jsdoc-var">addButton </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">, </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
314         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bc </span><span class="jsdoc-syntax">= {
315             </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">,
316             </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">,
317             </span><span class="jsdoc-var">minWidth</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.minButtonWidth</span><span class="jsdoc-syntax">,
318             </span><span class="jsdoc-var">hideParent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true
319         </span><span class="jsdoc-syntax">};
320         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
321             </span><span class="jsdoc-var">bc.text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
322         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
323             </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bc</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
324         }
325         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Button</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">bc</span><span class="jsdoc-syntax">);
326         </span><span class="jsdoc-var">this.buttons.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">);
327         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">;
328     },
329
330      </span><span class="jsdoc-comment">/**
331      * Adds a series of form elements (using the xtype property as the factory method.
332      * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
333      * @param {Object} config 
334      */
335
336     </span><span class="jsdoc-var">addxtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
337     {
338         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ar </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Array.prototype.slice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, 0);
339         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
340         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">ar.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
341             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]) {
342                 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// skip -- if this happends something invalid got sent, we 
343                 // should ignore it, as basically that interface element will not show up
344                 // and that should be pretty obvious!!
345             </span><span class="jsdoc-syntax">}
346
347             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.xtype</span><span class="jsdoc-syntax">]) {
348                 </span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.form </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
349                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fe </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">Roo.form</span><span class="jsdoc-syntax">);
350                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">) {
351                     </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">;
352                 }
353                 </span><span class="jsdoc-var">fe.form </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
354                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe.store</span><span class="jsdoc-syntax">) {
355                     </span><span class="jsdoc-var">fe.store.form </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
356                 }
357                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe.isLayout</span><span class="jsdoc-syntax">) {
358
359                     </span><span class="jsdoc-var">this.start</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
360                     </span><span class="jsdoc-var">this.allItems.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
361                     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe.items </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">fe.addxtype</span><span class="jsdoc-syntax">) {
362                         </span><span class="jsdoc-var">fe.addxtype.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fe.items</span><span class="jsdoc-syntax">);
363                         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">fe.items</span><span class="jsdoc-syntax">;
364                     }
365                      </span><span class="jsdoc-var">this.end</span><span class="jsdoc-syntax">();
366                     </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
367                 }
368
369
370
371                 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
372               </span><span class="jsdoc-comment">//  console.log('adding ' + ar[i].xtype);
373             </span><span class="jsdoc-syntax">}
374             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.xtype </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'Button'</span><span class="jsdoc-syntax">) {
375                 </span><span class="jsdoc-comment">//console.log('adding button');
376                 //console.log(ar[i]);
377                 </span><span class="jsdoc-var">this.addButton</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
378                 </span><span class="jsdoc-var">this.allItems.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
379                 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
380             }
381
382             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.xtype </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'end'</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">// so we can add fieldsets... / layout etc.
383                 </span><span class="jsdoc-var">alert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'end is not supported on xtype any more, use items'</span><span class="jsdoc-syntax">);
384             </span><span class="jsdoc-comment">//    this.end();
385             //    //console.log('adding end');
386             </span><span class="jsdoc-syntax">}
387
388         }
389         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
390     },
391
392     </span><span class="jsdoc-comment">/**
393      * Starts monitoring of the valid state of this form. Usually this is done by passing the config
394      * option &quot;monitorValid&quot;
395      */
396     </span><span class="jsdoc-var">startMonitoring </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
397         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.bound</span><span class="jsdoc-syntax">){
398             </span><span class="jsdoc-var">this.bound </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
399             </span><span class="jsdoc-var">Roo.TaskMgr.start</span><span class="jsdoc-syntax">({
400                 </span><span class="jsdoc-var">run </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.bindHandler</span><span class="jsdoc-syntax">,
401                 </span><span class="jsdoc-var">interval </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.monitorPoll </span><span class="jsdoc-syntax">|| 200,
402                 </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this
403             </span><span class="jsdoc-syntax">});
404         }
405     },
406
407     </span><span class="jsdoc-comment">/**
408      * Stops monitoring of the valid state of this form
409      */
410     </span><span class="jsdoc-var">stopMonitoring </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
411         </span><span class="jsdoc-var">this.bound </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
412     },
413
414     </span><span class="jsdoc-comment">// private
415     </span><span class="jsdoc-var">bindHandler </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
416         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.bound</span><span class="jsdoc-syntax">){
417             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// stops binding
418         </span><span class="jsdoc-syntax">}
419         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
420         </span><span class="jsdoc-var">this.items.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">){
421             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">f.isValid</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)){
422                 </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
423                 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
424             }
425         });
426         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.buttons.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
427             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.buttons</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
428             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn.formBind </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">btn.disabled </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">valid</span><span class="jsdoc-syntax">){
429                 </span><span class="jsdoc-var">btn.setDisabled</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">valid</span><span class="jsdoc-syntax">);
430             }
431         }
432         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'clientvalidation'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">valid</span><span class="jsdoc-syntax">);
433     }
434
435
436
437
438
439
440
441
442 });
443
444
445 </span><span class="jsdoc-comment">// back compat
446 </span><span class="jsdoc-var">Roo.Form </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.form.Form</span><span class="jsdoc-syntax">;
447 </span></code></body></html>
RooJS - Version 1