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
  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
  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
 163 /**
 164  * @class Roo.form.Column
 165  * @extends Roo.form.Layout
 166  * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
 167  * @constructor
 168  * @param {Object} config Configuration options
 169  */
 170 Roo.form.Column = function(config){
 171     Roo.form.Column.superclass.constructor.call(this, config);
 172 };
 173
 174 Roo.extend(Roo.form.Column, Roo.form.Layout, {
 175     /**
 176      * @cfg {Number/String} width
 177      * The fixed width of the column in pixels or CSS value (defaults to "auto")
 178      */
 179     /**
 180      * @cfg {String/Object} autoCreate
 181      * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
 182      */
 183
 184     // private
 185     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
 186
 187     // private
 188     onRender : function(ct, position){
 189         Roo.form.Column.superclass.onRender.call(this, ct, position);
 190         if(this.width){
 191             this.el.setWidth(this.width);
 192         }
 193     }
 194 });
 195
 196
 197 /**
 198  * @class Roo.form.Row
 199  * @extends Roo.form.Layout
 200  * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
 201  * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
 202  * @constructor
 203  * @param {Object} config Configuration options
 204  */
 205
 206
 207 Roo.form.Row = function(config){
 208     Roo.form.Row.superclass.constructor.call(this, config);
 209 };
 210
 211 Roo.extend(Roo.form.Row, Roo.form.Layout, {
 212       /**
 213      * @cfg {Number/String} width
 214      * The fixed width of the column in pixels or CSS value (defaults to "auto")
 215      */
 216     /**
 217      * @cfg {Number/String} height
 218      * The fixed height of the column in pixels or CSS value (defaults to "auto")
 219      */
 220     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
 221
 222     padWidth : 20,
 223     // private
 224     onRender : function(ct, position){
 225         //console.log('row render');
 226         if(!this.rowTpl){
 227             var t = new Roo.Template(
 228                 '<div class="x-form-item {5}" style="float:left;width:{6}px">',
 229                     '<label for="{0}" style="{2}">{1}{4}</label>',
 230                     '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
 231                     '</div>',
 232                 '</div>'
 233             );
 234             t.disableFormats = true;
 235             t.compile();
 236             Roo.form.Layout.prototype.rowTpl = t;
 237         }
 238         this.fieldTpl = this.rowTpl;
 239
 240         //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
 241         var labelWidth = 100;
 242
 243         if ((this.labelAlign != 'top')) {
 244             if (typeof this.labelWidth == 'number') {
 245                 labelWidth = this.labelWidth
 246             }
 247             this.padWidth =  20 + labelWidth;
 248
 249         }
 250
 251         Roo.form.Column.superclass.onRender.call(this, ct, position);
 252         if(this.width){
 253             this.el.setWidth(this.width);
 254         }
 255         if(this.height){
 256             this.el.setHeight(this.height);
 257         }
 258     },
 259
 260     // private
 261     renderField : function(f){
 262         f.fieldEl = this.fieldTpl.append(this.el, [
 263                f.id, f.fieldLabel,
 264                f.labelStyle||this.labelStyle||'',
 265                this.elementStyle||'',
 266                typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
 267                f.itemCls||this.itemCls||'',
 268                f.width ? f.width + this.padWidth : 160 + this.padWidth
 269        ],true);
 270     }
 271 });
 272
 273
 274 /**
 275  * @class Roo.form.FieldSet
 276  * @extends Roo.form.Layout
 277  * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
 278  * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
 279  * @constructor
 280  * @param {Object} config Configuration options
 281  */
 282 Roo.form.FieldSet = function(config){
 283     Roo.form.FieldSet.superclass.constructor.call(this, config);
 284 };
 285
 286 Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
 287     /**
 288      * @cfg {String} legend
 289      * The text to display as the legend for the FieldSet (defaults to '')
 290      */
 291     /**
 292      * @cfg {String/Object} autoCreate
 293      * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
 294      */
 295
 296     // private
 297     defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
 298
 299     // private
 300     onRender : function(ct, position){
 301         Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
 302         if(this.legend){
 303             this.setLegend(this.legend);
 304         }
 305     },
 306
 307     // private
 308     setLegend : function(text){
 309         if(this.rendered){
 310             this.el.child('legend').update(text);
 311         }
 312     }
 313 });