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