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