git.roojs.org Git - roojs1/blob - docs.old/symbols/src/Roo_form_Form.js.html

   1 <html><head><title>../roojs1/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
 114     </span><span class="jsdoc-comment">/**
 115      * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
 116      * fields are added and the column is closed. If no fields are passed the column remains open
 117      * until end() is called.
 118      * @param {Object} config The config to pass to the column
 119      * @param {Field} field1 (optional)
 120      * @param {Field} field2 (optional)
 121      * @param {Field} etc (optional)
 122      * @return Column The column container object
 123      */
 124     </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">){
 125         </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">);
 126         </span><span class="jsdoc-var">this.start</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">);
 127         </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
 128             </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));
 129             </span><span class="jsdoc-var">this.end</span><span class="jsdoc-syntax">();
 130         }
 131         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">;
 132     },
 133
 134     </span><span class="jsdoc-comment">/**
 135      * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
 136      * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
 137      * until end() is called.
 138      * @param {Object} config The config to pass to the fieldset
 139      * @param {Field} field1 (optional)
 140      * @param {Field} field2 (optional)
 141      * @param {Field} etc (optional)
 142      * @return FieldSet The fieldset container object
 143      */
 144     </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">){
 145         </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">);
 146         </span><span class="jsdoc-var">this.start</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fs</span><span class="jsdoc-syntax">);
 147         </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
 148             </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));
 149             </span><span class="jsdoc-var">this.end</span><span class="jsdoc-syntax">();
 150         }
 151         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">fs</span><span class="jsdoc-syntax">;
 152     },
 153
 154     </span><span class="jsdoc-comment">/**
 155      * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
 156      * fields are added and the container is closed. If no fields are passed the container remains open
 157      * until end() is called.
 158      * @param {Object} config The config to pass to the Layout
 159      * @param {Field} field1 (optional)
 160      * @param {Field} field2 (optional)
 161      * @param {Field} etc (optional)
 162      * @return Layout The container object
 163      */
 164     </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">){
 165         </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">);
 166         </span><span class="jsdoc-var">this.start</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">);
 167         </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
 168             </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));
 169             </span><span class="jsdoc-var">this.end</span><span class="jsdoc-syntax">();
 170         }
 171         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">;
 172     },
 173
 174     </span><span class="jsdoc-comment">/**
 175      * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
 176      * @param {Object} container A Roo.form.Layout or subclass of Layout
 177      * @return {Form} this
 178      */
 179     </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">){
 180         </span><span class="jsdoc-comment">// cascade label info
 181         </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">});
 182         </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">);
 183         </span><span class="jsdoc-var">c.ownerCt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.active</span><span class="jsdoc-syntax">;
 184         </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
 185         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 186     },
 187
 188     </span><span class="jsdoc-comment">/**
 189      * Closes the current open container
 190      * @return {Form} this
 191      */
 192     </span><span class="jsdoc-var">end </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 193         </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">){
 194             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 195         }
 196         </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">;
 197         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 198     },
 199
 200     </span><span class="jsdoc-comment">/**
 201      * Add Roo.form components to the current open container (e.g. column, fieldset, etc.).  Fields added via this method
 202      * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
 203      * as the label of the field.
 204      * @param {Field} field1
 205      * @param {Field} field2 (optional)
 206      * @param {Field} etc. (optional)
 207      * @return {Form} this
 208      */
 209     </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 210         </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">);
 211         </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">);
 212         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= [];
 213         </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">++) {
 214             </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">){
 215                 </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">]);
 216             }
 217         }
 218         </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){
 219             </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">);
 220         }
 221         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 222     },
 223
 224
 225
 226
 227
 228      </span><span class="jsdoc-comment">/**
 229      * Find any element that has been added to a form, using it's ID or name
 230      * This can include framesets, columns etc. along with regular fields..
 231      * @param {String} id - id or name to find.
 232
 233      * @return {Element} e - or false if nothing found.
 234      */
 235     </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">)
 236     {
 237         </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">;
 238         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) {
 239             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
 240         }
 241         </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">){
 242             </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">){
 243                 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">;
 244                 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 245             }
 246         });
 247         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
 248     },
 249
 250
 251
 252     </span><span class="jsdoc-comment">/**
 253      * Render this form into the passed container. This should only be called once!
 254      * @param {String/HTMLElement/Element} container The element this component should be rendered into
 255      * @return {Form} this
 256      */
 257     </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">)
 258     {
 259
 260
 261
 262         </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">);
 263         </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">|| {
 264             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form'</span><span class="jsdoc-syntax">,
 265             </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">,
 266             </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">()
 267         };
 268         </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">));
 269
 270         </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">);
 271
 272
 273
 274         </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">){
 275             </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">);
 276         });
 277
 278         </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){
 279             </span><span class="jsdoc-comment">// tables are required to maintain order and for correct IE layout
 280             </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">: {
 281                 </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">,
 282                 </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;'
 283             </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">);
 284             </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];
 285             </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">++) {
 286                 </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">];
 287                 </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">);
 288                 </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">;
 289                 </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">));
 290             }
 291         }
 292         </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
 293             </span><span class="jsdoc-var">this.startMonitoring</span><span class="jsdoc-syntax">();
 294         }
 295         </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">);
 296         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 297     },
 298
 299     </span><span class="jsdoc-comment">/**
 300      * Adds a button to the footer of the form - this &lt;b&gt;must&lt;/b&gt; be called before the form is rendered.
 301      * @param {String/Object} config A string becomes the button text, an object can either be a Button config
 302      * object or a valid Roo.DomHelper element config
 303      * @param {Function} handler The function called when the button is clicked
 304      * @param {Object} scope (optional) The scope of the handler function
 305      * @return {Roo.Button}
 306      */
 307     </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">){
 308         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bc </span><span class="jsdoc-syntax">= {
 309             </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">,
 310             </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">,
 311             </span><span class="jsdoc-var">minWidth</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.minButtonWidth</span><span class="jsdoc-syntax">,
 312             </span><span class="jsdoc-var">hideParent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true
 313         </span><span class="jsdoc-syntax">};
 314         </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">){
 315             </span><span class="jsdoc-var">bc.text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
 316         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 317             </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">);
 318         }
 319         </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">);
 320         </span><span class="jsdoc-var">this.buttons.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">);
 321         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">;
 322     },
 323
 324      </span><span class="jsdoc-comment">/**
 325      * Adds a series of form elements (using the xtype property as the factory method.
 326      * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
 327      * @param {Object} config
 328      */
 329
 330     </span><span class="jsdoc-var">addxtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 331     {
 332         </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);
 333         </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">;
 334         </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">++) {
 335             </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">]) {
 336                 </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
 337                 // should ignore it, as basically that interface element will not show up
 338                 // and that should be pretty obvious!!
 339             </span><span class="jsdoc-syntax">}
 340
 341             </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">]) {
 342                 </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">;
 343                 </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">);
 344                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">) {
 345                     </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">;
 346                 }
 347                 </span><span class="jsdoc-var">fe.form </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 348                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe.store</span><span class="jsdoc-syntax">) {
 349                     </span><span class="jsdoc-var">fe.store.form </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 350                 }
 351                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe.isLayout</span><span class="jsdoc-syntax">) {
 352
 353                     </span><span class="jsdoc-var">this.start</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
 354                     </span><span class="jsdoc-var">this.allItems.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
 355                     </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">) {
 356                         </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">);
 357                         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">fe.items</span><span class="jsdoc-syntax">;
 358                     }
 359                      </span><span class="jsdoc-var">this.end</span><span class="jsdoc-syntax">();
 360                     </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
 361                 }
 362
 363
 364
 365                 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
 366               </span><span class="jsdoc-comment">//  console.log('adding ' + ar[i].xtype);
 367             </span><span class="jsdoc-syntax">}
 368             </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">) {
 369                 </span><span class="jsdoc-comment">//console.log('adding button');
 370                 //console.log(ar[i]);
 371                 </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">]);
 372                 </span><span class="jsdoc-var">this.allItems.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
 373                 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
 374             }
 375
 376             </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.
 377                 </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">);
 378             </span><span class="jsdoc-comment">//    this.end();
 379             //    //console.log('adding end');
 380             </span><span class="jsdoc-syntax">}
 381
 382         }
 383         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
 384     },
 385
 386     </span><span class="jsdoc-comment">/**
 387      * Starts monitoring of the valid state of this form. Usually this is done by passing the config
 388      * option &quot;monitorValid&quot;
 389      */
 390     </span><span class="jsdoc-var">startMonitoring </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 391         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.bound</span><span class="jsdoc-syntax">){
 392             </span><span class="jsdoc-var">this.bound </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 393             </span><span class="jsdoc-var">Roo.TaskMgr.start</span><span class="jsdoc-syntax">({
 394                 </span><span class="jsdoc-var">run </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.bindHandler</span><span class="jsdoc-syntax">,
 395                 </span><span class="jsdoc-var">interval </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.monitorPoll </span><span class="jsdoc-syntax">|| 200,
 396                 </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this
 397             </span><span class="jsdoc-syntax">});
 398         }
 399     },
 400
 401     </span><span class="jsdoc-comment">/**
 402      * Stops monitoring of the valid state of this form
 403      */
 404     </span><span class="jsdoc-var">stopMonitoring </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 405         </span><span class="jsdoc-var">this.bound </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 406     },
 407
 408     </span><span class="jsdoc-comment">// private
 409     </span><span class="jsdoc-var">bindHandler </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 410         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.bound</span><span class="jsdoc-syntax">){
 411             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// stops binding
 412         </span><span class="jsdoc-syntax">}
 413         </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">;
 414         </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">){
 415             </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">)){
 416                 </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 417                 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 418             }
 419         });
 420         </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">++){
 421             </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">];
 422             </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">){
 423                 </span><span class="jsdoc-var">btn.setDisabled</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">valid</span><span class="jsdoc-syntax">);
 424             }
 425         }
 426         </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">);
 427     }
 428
 429
 430
 431
 432
 433
 434
 435
 436 });
 437
 438
 439 </span><span class="jsdoc-comment">// back compat
 440 </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">;
 441 </span></code></body></html>