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">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
13 * @class Roo.form.Form
14 * @extends Roo.form.BasicForm
15 * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
16 * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
18 * @param {Object} config Configuration options
20 </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">){
21 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= [];
22 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">) {
23 </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">;
24 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">;
28 </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">);
29 </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">;
30 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.root</span><span class="jsdoc-syntax">){
31 </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">({
32 </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">()
33 }, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">));
35 </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.root</span><span class="jsdoc-syntax">;
36 </span><span class="jsdoc-comment">/**
37 * Array of all the buttons that have been added to this form via {@link addButton}
40 </span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">= [];
41 </span><span class="jsdoc-var">this.allItems </span><span class="jsdoc-syntax">= [];
42 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
43 </span><span class="jsdoc-comment">/**
44 * @event clientvalidation
45 * If the monitorValid config option is true, this event fires repetitively to notify of valid state
47 * @param {Boolean} valid true if the form has passed client-side validation
49 </span><span class="jsdoc-var">clientvalidation</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
50 </span><span class="jsdoc-comment">/**
52 * Fires when the form is rendered
53 * @param {Roo.form.Form} form
55 </span><span class="jsdoc-var">rendered </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
56 </span><span class="jsdoc-syntax">});
58 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.progressUrl</span><span class="jsdoc-syntax">) {
59 </span><span class="jsdoc-comment">// push a hidden field onto the list of fields..
60 </span><span class="jsdoc-var">this.addxtype</span><span class="jsdoc-syntax">( {
61 </span><span class="jsdoc-var">xns</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.form</span><span class="jsdoc-syntax">,
62 </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Hidden'</span><span class="jsdoc-syntax">,
63 </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'UPLOAD_IDENTIFIER'
64 </span><span class="jsdoc-syntax">});
68 </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">);
72 </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">, {
73 </span><span class="jsdoc-comment">/**
74 * @cfg {Roo.Button} buttons[] buttons at bottom of form
78 * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
81 * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
84 * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
86 </span><span class="jsdoc-var">buttonAlign</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">,
88 </span><span class="jsdoc-comment">/**
89 * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
91 </span><span class="jsdoc-var">minButtonWidth</span><span class="jsdoc-syntax">:75,
93 </span><span class="jsdoc-comment">/**
94 * @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
95 * This property cascades to child containers if not set.
97 </span><span class="jsdoc-var">labelAlign</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
99 </span><span class="jsdoc-comment">/**
100 * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
101 * fires a looping event with that state. This is required to bind buttons to the valid
102 * state using the config value formBind:true on the button.
104 </span><span class="jsdoc-var">monitorValid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
106 </span><span class="jsdoc-comment">/**
107 * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
109 </span><span class="jsdoc-var">monitorPoll </span><span class="jsdoc-syntax">: 200,
111 </span><span class="jsdoc-comment">/**
112 * @cfg {String} progressUrl - Url to return progress data
115 </span><span class="jsdoc-var">progressUrl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
116 </span><span class="jsdoc-comment">/**
117 * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
118 * sending a formdata with extra parameters - eg uploaded elements.
121 </span><span class="jsdoc-var">formData </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
123 </span><span class="jsdoc-comment">/**
124 * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
125 * fields are added and the column is closed. If no fields are passed the column remains open
126 * until end() is called.
127 * @param {Object} config The config to pass to the column
128 * @param {Field} field1 (optional)
129 * @param {Field} field2 (optional)
130 * @param {Field} etc (optional)
131 * @return Column The column container object
133 </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">){
134 </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">);
135 </span><span class="jsdoc-var">this.start</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">);
136 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments.length </span><span class="jsdoc-syntax">> 1){ </span><span class="jsdoc-comment">// duplicate code required because of Opera
137 </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));
138 </span><span class="jsdoc-var">this.end</span><span class="jsdoc-syntax">();
140 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">;
143 </span><span class="jsdoc-comment">/**
144 * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
145 * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
146 * until end() is called.
147 * @param {Object} config The config to pass to the fieldset
148 * @param {Field} field1 (optional)
149 * @param {Field} field2 (optional)
150 * @param {Field} etc (optional)
151 * @return FieldSet The fieldset container object
153 </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">){
154 </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">);
155 </span><span class="jsdoc-var">this.start</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fs</span><span class="jsdoc-syntax">);
156 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments.length </span><span class="jsdoc-syntax">> 1){ </span><span class="jsdoc-comment">// duplicate code required because of Opera
157 </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));
158 </span><span class="jsdoc-var">this.end</span><span class="jsdoc-syntax">();
160 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">fs</span><span class="jsdoc-syntax">;
163 </span><span class="jsdoc-comment">/**
164 * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
165 * fields are added and the container is closed. If no fields are passed the container remains open
166 * until end() is called.
167 * @param {Object} config The config to pass to the Layout
168 * @param {Field} field1 (optional)
169 * @param {Field} field2 (optional)
170 * @param {Field} etc (optional)
171 * @return Layout The container object
173 </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">){
174 </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">);
175 </span><span class="jsdoc-var">this.start</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">);
176 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments.length </span><span class="jsdoc-syntax">> 1){ </span><span class="jsdoc-comment">// duplicate code required because of Opera
177 </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));
178 </span><span class="jsdoc-var">this.end</span><span class="jsdoc-syntax">();
180 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">;
183 </span><span class="jsdoc-comment">/**
184 * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
185 * @param {Object} container A Roo.form.Layout or subclass of Layout
186 * @return {Form} this
188 </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">){
189 </span><span class="jsdoc-comment">// cascade label info
190 </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">});
191 </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">);
192 </span><span class="jsdoc-var">c.ownerCt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.active</span><span class="jsdoc-syntax">;
193 </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
194 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
197 </span><span class="jsdoc-comment">/**
198 * Closes the current open container
199 * @return {Form} this
201 </span><span class="jsdoc-var">end </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
202 </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">){
203 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
205 </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">;
206 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
209 </span><span class="jsdoc-comment">/**
210 * Add Roo.form components to the current open container (e.g. column, fieldset, etc.). Fields added via this method
211 * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
212 * as the label of the field.
213 * @param {Field} field1
214 * @param {Field} field2 (optional)
215 * @param {Field} etc. (optional)
216 * @return {Form} this
218 </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
219 </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">);
220 </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">);
221 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [];
222 </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">< </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
223 </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">){
224 </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">]);
227 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.length </span><span class="jsdoc-syntax">> 0){
228 </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">);
230 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
237 </span><span class="jsdoc-comment">/**
238 * Find any element that has been added to a form, using it's ID or name
239 * This can include framesets, columns etc. along with regular fields..
240 * @param {String} id - id or name to find.
242 * @return {Element} e - or false if nothing found.
244 </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">)
246 </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">;
247 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) {
248 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
250 </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">){
251 </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">){
252 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">;
253 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
256 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
261 </span><span class="jsdoc-comment">/**
262 * Render this form into the passed container. This should only be called once!
263 * @param {String/HTMLElement/Element} container The element this component should be rendered into
264 * @return {Form} this
266 </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">)
271 </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">);
272 </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">|| {
273 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form'</span><span class="jsdoc-syntax">,
274 </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">,
275 </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">()
277 </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">));
279 </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">);
283 </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">){
284 </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">);
287 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.buttons.length </span><span class="jsdoc-syntax">> 0){
288 </span><span class="jsdoc-comment">// tables are required to maintain order and for correct IE layout
289 </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">: {
290 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">"x-form-btns x-form-btns-"</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.buttonAlign</span><span class="jsdoc-syntax">,
291 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
292 </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">);
293 </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];
294 </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">< </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
295 </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">];
296 </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">);
297 </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">;
298 </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">));
301 </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
302 </span><span class="jsdoc-var">this.startMonitoring</span><span class="jsdoc-syntax">();
304 </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">);
305 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
308 </span><span class="jsdoc-comment">/**
309 * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
310 * @param {String/Object} config A string becomes the button text, an object can either be a Button config
311 * object or a valid Roo.DomHelper element config
312 * @param {Function} handler The function called when the button is clicked
313 * @param {Object} scope (optional) The scope of the handler function
314 * @return {Roo.Button}
316 </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">){
317 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bc </span><span class="jsdoc-syntax">= {
318 </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">,
319 </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">,
320 </span><span class="jsdoc-var">minWidth</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.minButtonWidth</span><span class="jsdoc-syntax">,
321 </span><span class="jsdoc-var">hideParent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true
322 </span><span class="jsdoc-syntax">};
323 </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">"string"</span><span class="jsdoc-syntax">){
324 </span><span class="jsdoc-var">bc.text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
325 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
326 </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">);
328 </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">);
329 </span><span class="jsdoc-var">this.buttons.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">);
330 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">;
333 </span><span class="jsdoc-comment">/**
334 * Adds a series of form elements (using the xtype property as the factory method.
335 * Valid xtypes are: TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
336 * @param {Object} config
339 </span><span class="jsdoc-var">addxtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
341 </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);
342 </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">;
343 </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">< </span><span class="jsdoc-var">ar.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
344 </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">]) {
345 </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
346 // should ignore it, as basically that interface element will not show up
347 // and that should be pretty obvious!!
348 </span><span class="jsdoc-syntax">}
350 </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">]) {
351 </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">;
352 </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">);
353 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">) {
354 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">;
356 </span><span class="jsdoc-var">fe.form </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
357 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe.store</span><span class="jsdoc-syntax">) {
358 </span><span class="jsdoc-var">fe.store.form </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
360 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe.isLayout</span><span class="jsdoc-syntax">) {
362 </span><span class="jsdoc-var">this.start</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
363 </span><span class="jsdoc-var">this.allItems.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
364 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe.items </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">fe.addxtype</span><span class="jsdoc-syntax">) {
365 </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">);
366 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">fe.items</span><span class="jsdoc-syntax">;
368 </span><span class="jsdoc-var">this.end</span><span class="jsdoc-syntax">();
369 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
374 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
375 </span><span class="jsdoc-comment">// console.log('adding ' + ar[i].xtype);
376 </span><span class="jsdoc-syntax">}
377 </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">) {
378 </span><span class="jsdoc-comment">//console.log('adding button');
379 //console.log(ar[i]);
380 </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">]);
381 </span><span class="jsdoc-var">this.allItems.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
382 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
385 </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.
386 </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">);
387 </span><span class="jsdoc-comment">// this.end();
388 // //console.log('adding end');
389 </span><span class="jsdoc-syntax">}
392 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
395 </span><span class="jsdoc-comment">/**
396 * Starts monitoring of the valid state of this form. Usually this is done by passing the config
397 * option "monitorValid"
399 </span><span class="jsdoc-var">startMonitoring </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
400 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.bound</span><span class="jsdoc-syntax">){
401 </span><span class="jsdoc-var">this.bound </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
402 </span><span class="jsdoc-var">Roo.TaskMgr.start</span><span class="jsdoc-syntax">({
403 </span><span class="jsdoc-var">run </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.bindHandler</span><span class="jsdoc-syntax">,
404 </span><span class="jsdoc-var">interval </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.monitorPoll </span><span class="jsdoc-syntax">|| 200,
405 </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this
406 </span><span class="jsdoc-syntax">});
410 </span><span class="jsdoc-comment">/**
411 * Stops monitoring of the valid state of this form
413 </span><span class="jsdoc-var">stopMonitoring </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
414 </span><span class="jsdoc-var">this.bound </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
417 </span><span class="jsdoc-comment">// private
418 </span><span class="jsdoc-var">bindHandler </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
419 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.bound</span><span class="jsdoc-syntax">){
420 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// stops binding
421 </span><span class="jsdoc-syntax">}
422 </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">;
423 </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">){
424 </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">)){
425 </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
426 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
429 </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">< </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
430 </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">];
431 </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">&& </span><span class="jsdoc-var">btn.disabled </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">valid</span><span class="jsdoc-syntax">){
432 </span><span class="jsdoc-var">btn.setDisabled</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">valid</span><span class="jsdoc-syntax">);
435 </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">);
448 </span><span class="jsdoc-comment">// back compat
449 </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">;
450 </span></code></body></html>