git.roojs.org Git - roojs1/blob - docs/src/Roo_form_Layout.js.html

   1 <html><head><title>Roo/form/Layout.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.Layout
  14  * @extends Roo.Component
  15  * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
  16  * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
  17  * @constructor
  18  * @param {Object} config Configuration options
  19  */
  20 </span><span class="jsdoc-var">Roo.form.Layout </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     </span><span class="jsdoc-var">Roo.form.Layout.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  27     </span><span class="jsdoc-var">this.stack </span><span class="jsdoc-syntax">= [];
  28     </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">);
  29
  30 };
  31
  32 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.Layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">, {
  33     </span><span class="jsdoc-comment">/**
  34      * @cfg {String/Object} autoCreate
  35      * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
  36      */
  37     /**
  38      * @cfg {String/Object/Function} style
  39      * A style specification string, e.g. &quot;width:100px&quot;, or object in the form {width:&quot;100px&quot;}, or
  40      * a function which returns such a specification.
  41      */
  42     /**
  43      * @cfg {String} labelAlign (left|top|right)
  44      * Valid values are &quot;left,&quot; &quot;top&quot; and &quot;right&quot; (defaults to &quot;left&quot;)
  45      */
  46     /**
  47      * @cfg {Number} labelWidth
  48      * Fixed width in pixels of all field labels (defaults to undefined)
  49      */
  50     /**
  51      * @cfg {Boolean} clear
  52      * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
  53      */
  54     </span><span class="jsdoc-var">clear </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  55     </span><span class="jsdoc-comment">/**
  56      * @cfg {String} labelSeparator
  57      * The separator to use after field labels (defaults to ':')
  58      */
  59     </span><span class="jsdoc-var">labelSeparator </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">':'</span><span class="jsdoc-syntax">,
  60     </span><span class="jsdoc-comment">/**
  61      * @cfg {Boolean} hideLabels
  62      * True to suppress the display of field labels in this layout (defaults to false)
  63      */
  64     </span><span class="jsdoc-var">hideLabels </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  65
  66     </span><span class="jsdoc-comment">// private
  67     </span><span class="jsdoc-var">defaultAutoCreate </span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-form-ct'</span><span class="jsdoc-syntax">},
  68
  69     </span><span class="jsdoc-var">isLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  70
  71     </span><span class="jsdoc-comment">// private
  72     </span><span class="jsdoc-var">onRender </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">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
  73         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// from markup
  74             </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
  75         }</span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{  </span><span class="jsdoc-comment">// generate
  76             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getAutoCreate</span><span class="jsdoc-syntax">();
  77             </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ct.createChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
  78         }
  79         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">){
  80             </span><span class="jsdoc-var">this.el.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">);
  81         }
  82         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelAlign</span><span class="jsdoc-syntax">){
  83             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-form-label-'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.labelAlign</span><span class="jsdoc-syntax">);
  84         }
  85         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideLabels</span><span class="jsdoc-syntax">){
  86             </span><span class="jsdoc-var">this.labelStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;display:none&quot;</span><span class="jsdoc-syntax">;
  87             </span><span class="jsdoc-var">this.elementStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;padding-left:0;&quot;</span><span class="jsdoc-syntax">;
  88         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
  89             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.labelWidth </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'number'</span><span class="jsdoc-syntax">){
  90                 </span><span class="jsdoc-var">this.labelStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;width:&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.labelWidth</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">&quot;px;&quot;</span><span class="jsdoc-syntax">;
  91                 </span><span class="jsdoc-var">this.elementStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;padding-left:&quot;</span><span class="jsdoc-syntax">+((</span><span class="jsdoc-var">this.labelWidth</span><span class="jsdoc-syntax">+(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.labelPad </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'number' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.labelPad </span><span class="jsdoc-syntax">: 5))+</span><span class="jsdoc-string">'px'</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-string">&quot;;&quot;</span><span class="jsdoc-syntax">;
  92             }
  93             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelAlign </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">){
  94                 </span><span class="jsdoc-var">this.labelStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;width:auto;&quot;</span><span class="jsdoc-syntax">;
  95                 </span><span class="jsdoc-var">this.elementStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;padding-left:0;&quot;</span><span class="jsdoc-syntax">;
  96             }
  97         }
  98         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">stack </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.stack</span><span class="jsdoc-syntax">;
  99         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">slen </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">stack.length</span><span class="jsdoc-syntax">;
 100         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">slen </span><span class="jsdoc-syntax">&gt; 0){
 101             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.fieldTpl</span><span class="jsdoc-syntax">){
 102                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Template</span><span class="jsdoc-syntax">(
 103                     </span><span class="jsdoc-string">'&lt;div class=&quot;x-form-item {5}&quot;&gt;'</span><span class="jsdoc-syntax">,
 104                         </span><span class="jsdoc-string">'&lt;label for=&quot;{0}&quot; style=&quot;{2}&quot;&gt;{1}{4}&lt;/label&gt;'</span><span class="jsdoc-syntax">,
 105                         </span><span class="jsdoc-string">'&lt;div class=&quot;x-form-element&quot; id=&quot;x-form-el-{0}&quot; style=&quot;{3}&quot;&gt;'</span><span class="jsdoc-syntax">,
 106                         </span><span class="jsdoc-string">'&lt;/div&gt;'</span><span class="jsdoc-syntax">,
 107                     </span><span class="jsdoc-string">'&lt;/div&gt;&lt;div class=&quot;x-form-clear-left&quot;&gt;&lt;/div&gt;'
 108                 </span><span class="jsdoc-syntax">);
 109                 </span><span class="jsdoc-var">t.disableFormats </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 110                 </span><span class="jsdoc-var">t.compile</span><span class="jsdoc-syntax">();
 111                 </span><span class="jsdoc-var">Roo.form.Layout.prototype.fieldTpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
 112             }
 113             </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">slen</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 114                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">stack</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">){
 115                     </span><span class="jsdoc-var">this.renderField</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">stack</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
 116                 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 117                     </span><span class="jsdoc-var">this.renderComponent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">stack</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
 118                 }
 119             }
 120         }
 121         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.clear</span><span class="jsdoc-syntax">){
 122             </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-clear'</span><span class="jsdoc-syntax">});
 123         }
 124     },
 125
 126     </span><span class="jsdoc-comment">// private
 127     </span><span class="jsdoc-var">renderField </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">){
 128         </span><span class="jsdoc-var">f.fieldEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fieldTpl.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, [
 129                </span><span class="jsdoc-var">f.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">//0
 130                </span><span class="jsdoc-var">f.fieldLabel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">//1
 131                </span><span class="jsdoc-var">f.labelStyle</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">this.labelStyle</span><span class="jsdoc-syntax">||</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">//2
 132                </span><span class="jsdoc-var">this.elementStyle</span><span class="jsdoc-syntax">||</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">//3
 133                </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">f.labelSeparator </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.labelSeparator </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">f.labelSeparator</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">//4
 134                </span><span class="jsdoc-var">f.itemCls</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">this.itemCls</span><span class="jsdoc-syntax">||</span><span class="jsdoc-string">''  </span><span class="jsdoc-comment">//5
 135        </span><span class="jsdoc-syntax">], </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getPrevSibling</span><span class="jsdoc-syntax">());
 136     },
 137
 138     </span><span class="jsdoc-comment">// private
 139     </span><span class="jsdoc-var">renderComponent </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">){
 140         </span><span class="jsdoc-var">c.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.isLayout </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">());
 141     },
 142     </span><span class="jsdoc-comment">/**
 143      * Adds a object form elements (using the xtype property as the factory method.)
 144      * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column
 145      * @param {Object} config
 146      */
 147     </span><span class="jsdoc-var">addxtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">)
 148     {
 149         </span><span class="jsdoc-comment">// create the lement.
 150         </span><span class="jsdoc-var">o.form </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.form</span><span class="jsdoc-syntax">;
 151         </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">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form</span><span class="jsdoc-syntax">);
 152         </span><span class="jsdoc-var">this.form.allItems.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
 153         </span><span class="jsdoc-var">this.stack.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
 154
 155         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe.isFormField</span><span class="jsdoc-syntax">) {
 156             </span><span class="jsdoc-var">this.form.items.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">);
 157         }
 158
 159         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">;
 160     }
 161 });
 162
 163 </span></code></body></html>