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 * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
17 * @param {Object} config Configuration options
19 Roo.form.Layout = function(config){
22 xitems = config.items;
25 Roo.form.Layout.superclass.constructor.call(this, config);
27 Roo.each(xitems, this.addxtype, this);
31 Roo.extend(Roo.form.Layout, Roo.Component, {
33 * @cfg {String/Object} autoCreate
34 * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
37 * @cfg {String/Object/Function} style
38 * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
39 * a function which returns such a specification.
42 * @cfg {String} labelAlign
43 * Valid values are "left," "top" and "right" (defaults to "left")
46 * @cfg {Number} labelWidth
47 * Fixed width in pixels of all field labels (defaults to undefined)
50 * @cfg {Boolean} clear
51 * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
55 * @cfg {String} labelSeparator
56 * The separator to use after field labels (defaults to ':')
60 * @cfg {Boolean} hideLabels
61 * True to suppress the display of field labels in this layout (defaults to false)
66 defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
71 onRender : function(ct, position){
72 if(this.el){ // from markup
73 this.el = Roo.get(this.el);
75 var cfg = this.getAutoCreate();
76 this.el = ct.createChild(cfg, position);
79 this.el.applyStyles(this.style);
82 this.el.addClass('x-form-label-'+this.labelAlign);
85 this.labelStyle = "display:none";
86 this.elementStyle = "padding-left:0;";
88 if(typeof this.labelWidth == 'number'){
89 this.labelStyle = "width:"+this.labelWidth+"px;";
90 this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
92 if(this.labelAlign == 'top'){
93 this.labelStyle = "width:auto;";
94 this.elementStyle = "padding-left:0;";
97 var stack = this.stack;
98 var slen = stack.length;
101 var t = new Roo.Template(
102 '<div class="x-form-item {5}">',
103 '<label for="{0}" style="{2}">{1}{4}</label>',
104 '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
106 '</div><div class="x-form-clear-left"></div>'
108 t.disableFormats = true;
110 Roo.form.Layout.prototype.fieldTpl = t;
112 for(var i = 0; i < slen; i++) {
113 if(stack[i].isFormField){
114 this.renderField(stack[i]);
116 this.renderComponent(stack[i]);
121 this.el.createChild({cls:'x-form-clear'});
126 renderField : function(f){
127 f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
130 f.labelStyle||this.labelStyle||'', //2
131 this.elementStyle||'', //3
132 typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
133 f.itemCls||this.itemCls||'' //5
134 ], true).getPrevSibling());
138 renderComponent : function(c){
139 c.render(c.isLayout ? this.el : this.el.createChild());
142 * Adds a object form elements (using the xtype property as the factory method.)
143 * Valid xtypes are: TextField, TextArea .... Button, Layout, FieldSet, Column
144 * @param {Object} config
146 addxtype : function(o)
148 // create the lement.
150 var fe = Roo.factory(o, Roo.form);
151 this.form.allItems.push(fe);
154 if (fe.isFormField) {
155 this.form.items.add(fe);
163 * @class Roo.form.Column
164 * @extends Roo.form.Layout
165 * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
167 * @param {Object} config Configuration options
169 Roo.form.Column = function(config){
170 Roo.form.Column.superclass.constructor.call(this, config);
173 Roo.extend(Roo.form.Column, Roo.form.Layout, {
175 * @cfg {Number/String} width
176 * The fixed width of the column in pixels or CSS value (defaults to "auto")
179 * @cfg {String/Object} autoCreate
180 * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
184 defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
187 onRender : function(ct, position){
188 Roo.form.Column.superclass.onRender.call(this, ct, position);
190 this.el.setWidth(this.width);
197 * @class Roo.form.Row
198 * @extends Roo.form.Layout
199 * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
201 * @param {Object} config Configuration options
205 Roo.form.Row = function(config){
206 Roo.form.Row.superclass.constructor.call(this, config);
209 Roo.extend(Roo.form.Row, Roo.form.Layout, {
211 * @cfg {Number/String} width
212 * The fixed width of the column in pixels or CSS value (defaults to "auto")
215 * @cfg {Number/String} height
216 * The fixed height of the column in pixels or CSS value (defaults to "auto")
218 defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
222 onRender : function(ct, position){
223 //console.log('row render');
225 var t = new Roo.Template(
226 '<div class="x-form-item {5}" style="float:left;width:{6}px">',
227 '<label for="{0}" style="{2}">{1}{4}</label>',
228 '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
232 t.disableFormats = true;
234 Roo.form.Layout.prototype.rowTpl = t;
236 this.fieldTpl = this.rowTpl;
238 //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
239 var labelWidth = 100;
241 if ((this.labelAlign != 'top')) {
242 if (typeof this.labelWidth == 'number') {
243 labelWidth = this.labelWidth
245 this.padWidth = 20 + labelWidth;
249 Roo.form.Column.superclass.onRender.call(this, ct, position);
251 this.el.setWidth(this.width);
254 this.el.setHeight(this.height);
259 renderField : function(f){
260 f.fieldEl = this.fieldTpl.append(this.el, [
262 f.labelStyle||this.labelStyle||'',
263 this.elementStyle||'',
264 typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
265 f.itemCls||this.itemCls||'',
266 f.width ? f.width + this.padWidth : 160 + this.padWidth
273 * @class Roo.form.FieldSet
274 * @extends Roo.form.Layout
275 * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
277 * @param {Object} config Configuration options
279 Roo.form.FieldSet = function(config){
280 Roo.form.FieldSet.superclass.constructor.call(this, config);
283 Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
285 * @cfg {String} legend
286 * The text to display as the legend for the FieldSet (defaults to '')
289 * @cfg {String/Object} autoCreate
290 * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
294 defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
297 onRender : function(ct, position){
298 Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
300 this.setLegend(this.legend);
305 setLegend : function(text){
307 this.el.child('legend').update(text);