Roo/form/Layout.js

/*
 * Based on:
 * Ext JS Library 1.1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 *
 * Originally Released Under LGPL - original licence link has changed is not relivant.
 *
 * Fork - LGPL
 * <script type="text/javascript">
 */

/**
 * @class Roo.form.Layout
 * @extends Roo.Component
 * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
 * @constructor
 * @param {Object} config Configuration options
 */
Roo.form.Layout = function(config){
    var xitems = [];
    if (config.items) {
        xitems = config.items;
        delete config.items;
    }
    Roo.form.Layout.superclass.constructor.call(this, config);
    this.stack = [];
    Roo.each(xitems, this.addxtype, this);

};

Roo.extend(Roo.form.Layout, Roo.Component, {
    /**
     * @cfg {String/Object} autoCreate
     * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
     */
    /**
     * @cfg {String/Object/Function} style
     * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
     * a function which returns such a specification.
     */
    /**
     * @cfg {String} labelAlign
     * Valid values are "left," "top" and "right" (defaults to "left")
     */
    /**
     * @cfg {Number} labelWidth
     * Fixed width in pixels of all field labels (defaults to undefined)
     */
    /**
     * @cfg {Boolean} clear
     * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
     */
    clear : true,
    /**
     * @cfg {String} labelSeparator
     * The separator to use after field labels (defaults to ':')
     */
    labelSeparator : ':',
    /**
     * @cfg {Boolean} hideLabels
     * True to suppress the display of field labels in this layout (defaults to false)
     */
    hideLabels : false,

    // private
    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},

    isLayout : true,

    // private
    onRender : function(ct, position){
        if(this.el){ // from markup
            this.el = Roo.get(this.el);
        }else {  // generate
            var cfg = this.getAutoCreate();
            this.el = ct.createChild(cfg, position);
        }
        if(this.style){
            this.el.applyStyles(this.style);
        }
        if(this.labelAlign){
            this.el.addClass('x-form-label-'+this.labelAlign);
        }
        if(this.hideLabels){
            this.labelStyle = "display:none";
            this.elementStyle = "padding-left:0;";
        }else{
            if(typeof this.labelWidth == 'number'){
                this.labelStyle = "width:"+this.labelWidth+"px;";
                this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
            }
            if(this.labelAlign == 'top'){
                this.labelStyle = "width:auto;";
                this.elementStyle = "padding-left:0;";
            }
        }
        var stack = this.stack;
        var slen = stack.length;
        if(slen > 0){
            if(!this.fieldTpl){
                var t = new Roo.Template(
                    '<div class="x-form-item {5}">',
                        '<label for="{0}" style="{2}">{1}{4}</label>',
                        '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
                        '</div>',
                    '</div><div class="x-form-clear-left"></div>'
                );
                t.disableFormats = true;
                t.compile();
                Roo.form.Layout.prototype.fieldTpl = t;
            }
            for(var i = 0; i < slen; i++) {
                if(stack[i].isFormField){
                    this.renderField(stack[i]);
                }else{
                    this.renderComponent(stack[i]);
                }
            }
        }
        if(this.clear){
            this.el.createChild({cls:'x-form-clear'});
        }
    },

    // private
    renderField : function(f){
        f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
               f.id, //0
               f.fieldLabel, //1
               f.labelStyle||this.labelStyle||'', //2
               this.elementStyle||'', //3
               typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
               f.itemCls||this.itemCls||''  //5
       ], true).getPrevSibling());
    },

    // private
    renderComponent : function(c){
        c.render(c.isLayout ? this.el : this.el.createChild());
    },
    /**
     * Adds a object form elements (using the xtype property as the factory method.)
     * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column
     * @param {Object} config 
     */
    addxtype : function(o)
    {
        // create the lement.
        o.form = this.form;
        var fe = Roo.factory(o, Roo.form);
        this.form.allItems.push(fe);
        this.stack.push(fe);

        if (fe.isFormField) {
            this.form.items.add(fe);
        }

        return fe;
    }
});

/**
 * @class Roo.form.Column
 * @extends Roo.form.Layout
 * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
 * @constructor
 * @param {Object} config Configuration options
 */
Roo.form.Column = function(config){
    Roo.form.Column.superclass.constructor.call(this, config);
};

Roo.extend(Roo.form.Column, Roo.form.Layout, {
    /**
     * @cfg {Number/String} width
     * The fixed width of the column in pixels or CSS value (defaults to "auto")
     */
    /**
     * @cfg {String/Object} autoCreate
     * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
     */

    // private
    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},

    // private
    onRender : function(ct, position){
        Roo.form.Column.superclass.onRender.call(this, ct, position);
        if(this.width){
            this.el.setWidth(this.width);
        }
    }
});


/**
 * @class Roo.form.Row
 * @extends Roo.form.Layout
 * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
 * @constructor
 * @param {Object} config Configuration options
 */


Roo.form.Row = function(config){
    Roo.form.Row.superclass.constructor.call(this, config);
};

Roo.extend(Roo.form.Row, Roo.form.Layout, {
      /**
     * @cfg {Number/String} width
     * The fixed width of the column in pixels or CSS value (defaults to "auto")
     */
    /**
     * @cfg {Number/String} height
     * The fixed height of the column in pixels or CSS value (defaults to "auto")
     */
    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},

    padWidth : 20,
    // private
    onRender : function(ct, position){
        //console.log('row render');
        if(!this.rowTpl){
            var t = new Roo.Template(
                '<div class="x-form-item {5}" style="float:left;width:{6}px">',
                    '<label for="{0}" style="{2}">{1}{4}</label>',
                    '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
                    '</div>',
                '</div>'
            );
            t.disableFormats = true;
            t.compile();
            Roo.form.Layout.prototype.rowTpl = t;
        }
        this.fieldTpl = this.rowTpl;

        //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
        var labelWidth = 100;

        if ((this.labelAlign != 'top')) {
            if (typeof this.labelWidth == 'number') {
                labelWidth = this.labelWidth
            }
            this.padWidth =  20 + labelWidth;

        }

        Roo.form.Column.superclass.onRender.call(this, ct, position);
        if(this.width){
            this.el.setWidth(this.width);
        }
        if(this.height){
            this.el.setHeight(this.height);
        }
    },

    // private
    renderField : function(f){
        f.fieldEl = this.fieldTpl.append(this.el, [
               f.id, f.fieldLabel,
               f.labelStyle||this.labelStyle||'',
               this.elementStyle||'',
               typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
               f.itemCls||this.itemCls||'',
               f.width ? f.width + this.padWidth : 160 + this.padWidth
       ],true);
    }
});


/**
 * @class Roo.form.FieldSet
 * @extends Roo.form.Layout
 * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
 * @constructor
 * @param {Object} config Configuration options
 */
Roo.form.FieldSet = function(config){
    Roo.form.FieldSet.superclass.constructor.call(this, config);
};

Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
    /**
     * @cfg {String} legend
     * The text to display as the legend for the FieldSet (defaults to '')
     */
    /**
     * @cfg {String/Object} autoCreate
     * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
     */

    // private
    defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},

    // private
    onRender : function(ct, position){
        Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
        if(this.legend){
            this.setLegend(this.legend);
        }
    },

    // private
    setLegend : function(text){
        if(this.rendered){
            this.el.child('legend').update(text);
        }
    }
});