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  * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
  16  * @constructor
  17  * @param {Object} config Configuration options
  18  */
  19 Roo.form.Layout = function(config){
  20     var xitems = [];
  21     if (config.items) {
  22         xitems = config.items;
  23         delete config.items;
  24     }
  25     Roo.form.Layout.superclass.constructor.call(this, config);
  26     this.stack = [];
  27     Roo.each(xitems, this.addxtype, this);
  28
  29 };
  30
  31 Roo.extend(Roo.form.Layout, Roo.Component, {
  32     /**
  33      * @cfg {String/Object} autoCreate
  34      * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
  35      */
  36     /**
  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.
  40      */
  41     /**
  42      * @cfg {String} labelAlign
  43      * Valid values are "left," "top" and "right" (defaults to "left")
  44      */
  45     /**
  46      * @cfg {Number} labelWidth
  47      * Fixed width in pixels of all field labels (defaults to undefined)
  48      */
  49     /**
  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)
  52      */
  53     clear : true,
  54     /**
  55      * @cfg {String} labelSeparator
  56      * The separator to use after field labels (defaults to ':')
  57      */
  58     labelSeparator : ':',
  59     /**
  60      * @cfg {Boolean} hideLabels
  61      * True to suppress the display of field labels in this layout (defaults to false)
  62      */
  63     hideLabels : false,
  64
  65     // private
  66     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
  67
  68     isLayout : true,
  69
  70     // private
  71     onRender : function(ct, position){
  72         if(this.el){ // from markup
  73             this.el = Roo.get(this.el);
  74         }else {  // generate
  75             var cfg = this.getAutoCreate();
  76             this.el = ct.createChild(cfg, position);
  77         }
  78         if(this.style){
  79             this.el.applyStyles(this.style);
  80         }
  81         if(this.labelAlign){
  82             this.el.addClass('x-form-label-'+this.labelAlign);
  83         }
  84         if(this.hideLabels){
  85             this.labelStyle = "display:none";
  86             this.elementStyle = "padding-left:0;";
  87         }else{
  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')+";";
  91             }
  92             if(this.labelAlign == 'top'){
  93                 this.labelStyle = "width:auto;";
  94                 this.elementStyle = "padding-left:0;";
  95             }
  96         }
  97         var stack = this.stack;
  98         var slen = stack.length;
  99         if(slen > 0){
 100             if(!this.fieldTpl){
 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}">',
 105                         '</div>',
 106                     '</div><div class="x-form-clear-left"></div>'
 107                 );
 108                 t.disableFormats = true;
 109                 t.compile();
 110                 Roo.form.Layout.prototype.fieldTpl = t;
 111             }
 112             for(var i = 0; i < slen; i++) {
 113                 if(stack[i].isFormField){
 114                     this.renderField(stack[i]);
 115                 }else{
 116                     this.renderComponent(stack[i]);
 117                 }
 118             }
 119         }
 120         if(this.clear){
 121             this.el.createChild({cls:'x-form-clear'});
 122         }
 123     },
 124
 125     // private
 126     renderField : function(f){
 127         f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
 128                f.id, //0
 129                f.fieldLabel, //1
 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());
 135     },
 136
 137     // private
 138     renderComponent : function(c){
 139         c.render(c.isLayout ? this.el : this.el.createChild());
 140     },
 141     /**
 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
 145      */
 146     addxtype : function(o)
 147     {
 148         // create the lement.
 149         o.form = this.form;
 150         var fe = Roo.factory(o, Roo.form);
 151         this.form.allItems.push(fe);
 152         this.stack.push(fe);
 153
 154         if (fe.isFormField) {
 155             this.form.items.add(fe);
 156         }
 157
 158         return fe;
 159     }
 160 });
 161
 162 /**
 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}.
 166  * @constructor
 167  * @param {Object} config Configuration options
 168  */
 169 Roo.form.Column = function(config){
 170     Roo.form.Column.superclass.constructor.call(this, config);
 171 };
 172
 173 Roo.extend(Roo.form.Column, Roo.form.Layout, {
 174     /**
 175      * @cfg {Number/String} width
 176      * The fixed width of the column in pixels or CSS value (defaults to "auto")
 177      */
 178     /**
 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'})
 181      */
 182
 183     // private
 184     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
 185
 186     // private
 187     onRender : function(ct, position){
 188         Roo.form.Column.superclass.onRender.call(this, ct, position);
 189         if(this.width){
 190             this.el.setWidth(this.width);
 191         }
 192     }
 193 });
 194
 195
 196 /**
 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}.
 200  * @constructor
 201  * @param {Object} config Configuration options
 202  */
 203
 204
 205 Roo.form.Row = function(config){
 206     Roo.form.Row.superclass.constructor.call(this, config);
 207 };
 208
 209 Roo.extend(Roo.form.Row, Roo.form.Layout, {
 210       /**
 211      * @cfg {Number/String} width
 212      * The fixed width of the column in pixels or CSS value (defaults to "auto")
 213      */
 214     /**
 215      * @cfg {Number/String} height
 216      * The fixed height of the column in pixels or CSS value (defaults to "auto")
 217      */
 218     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
 219
 220     padWidth : 20,
 221     // private
 222     onRender : function(ct, position){
 223         //console.log('row render');
 224         if(!this.rowTpl){
 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}">',
 229                     '</div>',
 230                 '</div>'
 231             );
 232             t.disableFormats = true;
 233             t.compile();
 234             Roo.form.Layout.prototype.rowTpl = t;
 235         }
 236         this.fieldTpl = this.rowTpl;
 237
 238         //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
 239         var labelWidth = 100;
 240
 241         if ((this.labelAlign != 'top')) {
 242             if (typeof this.labelWidth == 'number') {
 243                 labelWidth = this.labelWidth
 244             }
 245             this.padWidth =  20 + labelWidth;
 246
 247         }
 248
 249         Roo.form.Column.superclass.onRender.call(this, ct, position);
 250         if(this.width){
 251             this.el.setWidth(this.width);
 252         }
 253         if(this.height){
 254             this.el.setHeight(this.height);
 255         }
 256     },
 257
 258     // private
 259     renderField : function(f){
 260         f.fieldEl = this.fieldTpl.append(this.el, [
 261                f.id, f.fieldLabel,
 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
 267        ],true);
 268     }
 269 });
 270
 271
 272 /**
 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}.
 276  * @constructor
 277  * @param {Object} config Configuration options
 278  */
 279 Roo.form.FieldSet = function(config){
 280     Roo.form.FieldSet.superclass.constructor.call(this, config);
 281 };
 282
 283 Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
 284     /**
 285      * @cfg {String} legend
 286      * The text to display as the legend for the FieldSet (defaults to '')
 287      */
 288     /**
 289      * @cfg {String/Object} autoCreate
 290      * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
 291      */
 292
 293     // private
 294     defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
 295
 296     // private
 297     onRender : function(ct, position){
 298         Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
 299         if(this.legend){
 300             this.setLegend(this.legend);
 301         }
 302     },
 303
 304     // private
 305     setLegend : function(text){
 306         if(this.rendered){
 307             this.el.child('legend').update(text);
 308         }
 309     }
 310 });