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">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
13 * @class Roo.form.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}.
18 * @param {Object} config Configuration options
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">;
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">);
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'})
38 * @cfg {String/Object/Function} style
39 * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
40 * a function which returns such a specification.
43 * @cfg {String} labelAlign
44 * Valid values are "left," "top" and "right" (defaults to "left")
47 * @cfg {Number} labelWidth
48 * Fixed width in pixels of all field labels (defaults to undefined)
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)
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 ':')
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)
64 </span><span class="jsdoc-var">hideLabels </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
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">},
69 </span><span class="jsdoc-var">isLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
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">);
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">);
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">);
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">"display:none"</span><span class="jsdoc-syntax">;
87 </span><span class="jsdoc-var">this.elementStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"padding-left:0;"</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">"width:"</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.labelWidth</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">"px;"</span><span class="jsdoc-syntax">;
91 </span><span class="jsdoc-var">this.elementStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"padding-left:"</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">";"</span><span class="jsdoc-syntax">;
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">"width:auto;"</span><span class="jsdoc-syntax">;
95 </span><span class="jsdoc-var">this.elementStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"padding-left:0;"</span><span class="jsdoc-syntax">;
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">> 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">'<div class="x-form-item {5}">'</span><span class="jsdoc-syntax">,
104 </span><span class="jsdoc-string">'<label for="{0}" style="{2}">{1}{4}</label>'</span><span class="jsdoc-syntax">,
105 </span><span class="jsdoc-string">'<div class="x-form-element" id="x-form-el-{0}" style="{3}">'</span><span class="jsdoc-syntax">,
106 </span><span class="jsdoc-string">'</div>'</span><span class="jsdoc-syntax">,
107 </span><span class="jsdoc-string">'</div><div class="x-form-clear-left"></div>'
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">;
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">< </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">]);
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">});
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">());
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">());
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
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">)
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">);
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">);
159 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">fe</span><span class="jsdoc-syntax">;
163 </span><span class="jsdoc-comment">/**
164 * @class Roo.form.Column
165 * @extends Roo.form.Layout
166 * @children Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
167 * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
169 * @param {Object} config Configuration options
171 </span><span class="jsdoc-var">Roo.form.Column </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">){
172 </span><span class="jsdoc-var">Roo.form.Column.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">);
175 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.Column</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.Layout</span><span class="jsdoc-syntax">, {
176 </span><span class="jsdoc-comment">/**
177 * @cfg {Number/String} width
178 * The fixed width of the column in pixels or CSS value (defaults to "auto")
181 * @cfg {String/Object} autoCreate
182 * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
186 </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 x-form-column'</span><span class="jsdoc-syntax">},
188 </span><span class="jsdoc-comment">// private
189 </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">){
190 </span><span class="jsdoc-var">Roo.form.Column.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</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">);
191 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">){
192 </span><span class="jsdoc-var">this.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">);
198 </span><span class="jsdoc-comment">/**
199 * @class Roo.form.Row
200 * @extends Roo.form.Layout
201 * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
202 * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
204 * @param {Object} config Configuration options
208 </span><span class="jsdoc-var">Roo.form.Row </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">){
209 </span><span class="jsdoc-var">Roo.form.Row.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">);
212 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.Row</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.Layout</span><span class="jsdoc-syntax">, {
213 </span><span class="jsdoc-comment">/**
214 * @cfg {Number/String} width
215 * The fixed width of the column in pixels or CSS value (defaults to "auto")
218 * @cfg {Number/String} height
219 * The fixed height of the column in pixels or CSS value (defaults to "auto")
221 </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 x-form-row'</span><span class="jsdoc-syntax">},
223 </span><span class="jsdoc-var">padWidth </span><span class="jsdoc-syntax">: 20,
224 </span><span class="jsdoc-comment">// private
225 </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">){
226 </span><span class="jsdoc-comment">//console.log('row render');
227 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.rowTpl</span><span class="jsdoc-syntax">){
228 </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">(
229 </span><span class="jsdoc-string">'<div class="x-form-item {5}" style="float:left;width:{6}px">'</span><span class="jsdoc-syntax">,
230 </span><span class="jsdoc-string">'<label for="{0}" style="{2}">{1}{4}</label>'</span><span class="jsdoc-syntax">,
231 </span><span class="jsdoc-string">'<div class="x-form-element" id="x-form-el-{0}" style="{3}">'</span><span class="jsdoc-syntax">,
232 </span><span class="jsdoc-string">'</div>'</span><span class="jsdoc-syntax">,
233 </span><span class="jsdoc-string">'</div>'
234 </span><span class="jsdoc-syntax">);
235 </span><span class="jsdoc-var">t.disableFormats </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
236 </span><span class="jsdoc-var">t.compile</span><span class="jsdoc-syntax">();
237 </span><span class="jsdoc-var">Roo.form.Layout.prototype.rowTpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
239 </span><span class="jsdoc-var">this.fieldTpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.rowTpl</span><span class="jsdoc-syntax">;
241 </span><span class="jsdoc-comment">//console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
242 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">labelWidth </span><span class="jsdoc-syntax">= 100;
244 </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">)) {
245 </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">) {
246 </span><span class="jsdoc-var">labelWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.labelWidth
247 </span><span class="jsdoc-syntax">}
248 </span><span class="jsdoc-var">this.padWidth </span><span class="jsdoc-syntax">= 20 + </span><span class="jsdoc-var">labelWidth</span><span class="jsdoc-syntax">;
252 </span><span class="jsdoc-var">Roo.form.Column.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</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">);
253 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">){
254 </span><span class="jsdoc-var">this.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">);
256 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">){
257 </span><span class="jsdoc-var">this.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">);
261 </span><span class="jsdoc-comment">// private
262 </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">){
263 </span><span class="jsdoc-var">f.fieldEl </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">, [
264 </span><span class="jsdoc-var">f.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">f.fieldLabel</span><span class="jsdoc-syntax">,
265 </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">,
266 </span><span class="jsdoc-var">this.elementStyle</span><span class="jsdoc-syntax">||</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
267 </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">,
268 </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-syntax">,
269 </span><span class="jsdoc-var">f.width </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">f.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padWidth </span><span class="jsdoc-syntax">: 160 + </span><span class="jsdoc-var">this.padWidth
270 </span><span class="jsdoc-syntax">],</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
275 </span><span class="jsdoc-comment">/**
276 * @class Roo.form.FieldSet
277 * @extends Roo.form.Layout
278 * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
279 * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
281 * @param {Object} config Configuration options
283 </span><span class="jsdoc-var">Roo.form.FieldSet </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">){
284 </span><span class="jsdoc-var">Roo.form.FieldSet.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">);
287 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.FieldSet</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.Layout</span><span class="jsdoc-syntax">, {
288 </span><span class="jsdoc-comment">/**
289 * @cfg {String} legend
290 * The text to display as the legend for the FieldSet (defaults to '')
293 * @cfg {String/Object} autoCreate
294 * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
298 </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">'fieldset'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'legend'</span><span class="jsdoc-syntax">}},
300 </span><span class="jsdoc-comment">// private
301 </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">){
302 </span><span class="jsdoc-var">Roo.form.FieldSet.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</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">);
303 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.legend</span><span class="jsdoc-syntax">){
304 </span><span class="jsdoc-var">this.setLegend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.legend</span><span class="jsdoc-syntax">);
308 </span><span class="jsdoc-comment">// private
309 </span><span class="jsdoc-var">setLegend </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
310 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
311 </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'legend'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
314 });</span></code></body></html>