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