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 Roo.form.Layout = function(config){
23 xitems = config.items;
26 Roo.form.Layout.superclass.constructor.call(this, config);
28 Roo.each(xitems, this.addxtype, this);
32 Roo.extend(Roo.form.Layout, Roo.Component, {
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 (left|top|right)
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)
56 * @cfg {String} labelSeparator
57 * The separator to use after field labels (defaults to ':')
61 * @cfg {Boolean} hideLabels
62 * True to suppress the display of field labels in this layout (defaults to false)
67 defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
72 onRender : function(ct, position){
73 if(this.el){ // from markup
74 this.el = Roo.get(this.el);
76 var cfg = this.getAutoCreate();
77 this.el = ct.createChild(cfg, position);
80 this.el.applyStyles(this.style);
83 this.el.addClass('x-form-label-'+this.labelAlign);
86 this.labelStyle = "display:none";
87 this.elementStyle = "padding-left:0;";
89 if(typeof this.labelWidth == 'number'){
90 this.labelStyle = "width:"+this.labelWidth+"px;";
91 this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
93 if(this.labelAlign == 'top'){
94 this.labelStyle = "width:auto;";
95 this.elementStyle = "padding-left:0;";
98 var stack = this.stack;
99 var slen = stack.length;
102 var t = new Roo.Template(
103 '<div class="x-form-item {5}">',
104 '<label for="{0}" style="{2}">{1}{4}</label>',
105 '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
107 '</div><div class="x-form-clear-left"></div>'
109 t.disableFormats = true;
111 Roo.form.Layout.prototype.fieldTpl = t;
113 for(var i = 0; i < slen; i++) {
114 if(stack[i].isFormField){
115 this.renderField(stack[i]);
117 this.renderComponent(stack[i]);
122 this.el.createChild({cls:'x-form-clear'});
127 renderField : function(f){
128 f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
131 f.labelStyle||this.labelStyle||'', //2
132 this.elementStyle||'', //3
133 typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
134 f.itemCls||this.itemCls||'' //5
135 ], true).getPrevSibling());
139 renderComponent : function(c){
140 c.render(c.isLayout ? this.el : this.el.createChild());
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 addxtype : function(o)
149 // create the lement.
151 var fe = Roo.factory(o, Roo.form);
152 this.form.allItems.push(fe);
155 if (fe.isFormField) {
156 this.form.items.add(fe);