git.roojs.org Git - roojs1/blob - Roo/form/Layout.js

   1 /*
   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  * <script type="text/javascript">
  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 Roo.form.Layout = function(config){
  21     var xitems = [];
  22     if (config.items) {
  23         xitems = config.items;
  24         delete config.items;
  25     }
  26     Roo.form.Layout.superclass.constructor.call(this, config);
  27     this.stack = [];
  28     Roo.each(xitems, this.addxtype, this);
  29
  30 };
  31
  32 Roo.extend(Roo.form.Layout, Roo.Component, {
  33     /**
  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. "width:100px", or object in the form {width:"100px"}, or
  40      * a function which returns such a specification.
  41      */
  42     /**
  43      * @cfg {String} labelAlign (left|top|right)
  44      * Valid values are "left," "top" and "right" (defaults to "left")
  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     clear : true,
  55     /**
  56      * @cfg {String} labelSeparator
  57      * The separator to use after field labels (defaults to ':')
  58      */
  59     labelSeparator : ':',
  60     /**
  61      * @cfg {Boolean} hideLabels
  62      * True to suppress the display of field labels in this layout (defaults to false)
  63      */
  64     hideLabels : false,
  65
  66     // private
  67     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
  68
  69     isLayout : true,
  70
  71     // private
  72     onRender : function(ct, position){
  73         if(this.el){ // from markup
  74             this.el = Roo.get(this.el);
  75         }else {  // generate
  76             var cfg = this.getAutoCreate();
  77             this.el = ct.createChild(cfg, position);
  78         }
  79         if(this.style){
  80             this.el.applyStyles(this.style);
  81         }
  82         if(this.labelAlign){
  83             this.el.addClass('x-form-label-'+this.labelAlign);
  84         }
  85         if(this.hideLabels){
  86             this.labelStyle = "display:none";
  87             this.elementStyle = "padding-left:0;";
  88         }else{
  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')+";";
  92             }
  93             if(this.labelAlign == 'top'){
  94                 this.labelStyle = "width:auto;";
  95                 this.elementStyle = "padding-left:0;";
  96             }
  97         }
  98         var stack = this.stack;
  99         var slen = stack.length;
 100         if(slen > 0){
 101             if(!this.fieldTpl){
 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}">',
 106                         '</div>',
 107                     '</div><div class="x-form-clear-left"></div>'
 108                 );
 109                 t.disableFormats = true;
 110                 t.compile();
 111                 Roo.form.Layout.prototype.fieldTpl = t;
 112             }
 113             for(var i = 0; i < slen; i++) {
 114                 if(stack[i].isFormField){
 115                     this.renderField(stack[i]);
 116                 }else{
 117                     this.renderComponent(stack[i]);
 118                 }
 119             }
 120         }
 121         if(this.clear){
 122             this.el.createChild({cls:'x-form-clear'});
 123         }
 124     },
 125
 126     // private
 127     renderField : function(f){
 128         f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
 129                f.id, //0
 130                f.fieldLabel, //1
 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());
 136     },
 137
 138     // private
 139     renderComponent : function(c){
 140         c.render(c.isLayout ? this.el : this.el.createChild());
 141     },
 142     /**
 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     addxtype : function(o)
 148     {
 149         // create the lement.
 150         o.form = this.form;
 151         var fe = Roo.factory(o, Roo.form);
 152         this.form.allItems.push(fe);
 153         this.stack.push(fe);
 154
 155         if (fe.isFormField) {
 156             this.form.items.add(fe);
 157         }
 158
 159         return fe;
 160     }
 161 });
 162