X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/FormLayout.html diff --git a/docs/source/FormLayout.html b/docs/source/FormLayout.html deleted file mode 100644 index 56299397..00000000 --- a/docs/source/FormLayout.html +++ /dev/null @@ -1,269 +0,0 @@ - - - The source code - - - - - 
/**
- * @class Ext.layout.FormLayout
- * @extends Ext.layout.AnchorLayout
- * 
This layout manager is specifically designed for rendering and managing child Components of
- * {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of
- * {@link Ext.form.Field Field}s.

- *
- * 
This layout manager is used when a Container is configured with the layout:'form'
- * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly
- * via the new keyword. See {@link Ext.Container#layout} for additional details.

- *
- * 
In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel}
- * (which is configured with FormLayout as its layout class by default) since it also provides built-in
- * functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.

- *
- * 
A {@link Ext.Container Container} using the FormLayout layout manager (e.g.
- * {@link Ext.form.FormPanel} or specifying layout:'form') can also accept the following
- * layout-specific config properties:

- *
- * 
Any Component (including Fields) managed by FormLayout accepts the following as a config option:
- * 

- *
- * 
Any Component managed by FormLayout may be rendered as a form field (with an associated label) by
- * configuring it with a non-null {@link Ext.Component#fieldLabel fieldLabel}. Components configured
- * in this way may be configured with the following options which affect the way the FormLayout renders them:
- * 

- *
- * 
Example usage:

- * 

-// Required if showing validation messages
-Ext.QuickTips.init();
-
-// While you can create a basic Panel with layout:'form', practically
-// you should usually use a FormPanel to also get its form functionality
-// since it already creates a FormLayout internally.
-var form = new Ext.form.FormPanel({
-    title: 'Form Layout',
-    bodyStyle: 'padding:15px',
-    width: 350,
-    defaultType: 'textfield',
-    defaults: {
-        // applied to each contained item
-        width: 230,
-        msgTarget: 'side'
-    },
-    items: [{
-            fieldLabel: 'First Name',
-            name: 'first',
-            allowBlank: false,
-            {@link Ext.Component#labelSeparator labelSeparator}: ':' // override labelSeparator layout config
-        },{
-            fieldLabel: 'Last Name',
-            name: 'last'
-        },{
-            fieldLabel: 'Email',
-            name: 'email',
-            vtype:'email'
-        }, {
-            xtype: 'textarea',
-            hideLabel: true,     // override hideLabels layout config
-            name: 'msg',
-            anchor: '100% -53'
-        }
-    ],
-    buttons: [
-        {text: 'Save'},
-        {text: 'Cancel'}
-    ],
-    layoutConfig: {
-        {@link #labelSeparator}: '~' // superseded by assignment below
-    },
-    // config options applicable to container when layout='form':
-    hideLabels: false,
-    labelAlign: 'left',   // or 'right' or 'top'
-    {@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value
-    labelWidth: 65,       // defaults to 100
-    labelPad: 8           // defaults to 5, must specify labelWidth to be honored
-});
-

- */
-Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {
-
-    
/**
-     * @cfg {String} labelSeparator
-     * See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}.  Configuration
-     * of this property at the container level takes precedence.
-     */
-    labelSeparator : ':',
-
-    
/**
-     * Read only. The CSS style specification string added to field labels in this layout if not
-     * otherwise {@link Ext.Component#labelStyle specified by each contained field}.
-     * @type String
-     * @property labelStyle
-     */
-
-    // private
-    setContainer : function(ct){
-        Ext.layout.FormLayout.superclass.setContainer.call(this, ct);
-        if(ct.labelAlign){
-            ct.addClass('x-form-label-'+ct.labelAlign);
-        }
-
-        if(ct.hideLabels){
-            this.labelStyle = "display:none";
-            this.elementStyle = "padding-left:0;";
-            this.labelAdjust = 0;
-        }else{
-            this.labelSeparator = ct.labelSeparator || this.labelSeparator;
-            ct.labelWidth = ct.labelWidth || 100;
-            if(typeof ct.labelWidth == 'number'){
-                var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);
-                this.labelAdjust = ct.labelWidth+pad;
-                this.labelStyle = "width:"+ct.labelWidth+"px;";
-                this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';
-            }
-            if(ct.labelAlign == 'top'){
-                this.labelStyle = "width:auto;";
-                this.labelAdjust = 0;
-                this.elementStyle = "padding-left:0;";
-            }
-        }
-    },
-
-    //private
-    getLabelStyle: function(s){
-        var ls = '', items = [this.labelStyle, s];
-        for (var i = 0, len = items.length; i < len; ++i){
-            if (items[i]){
-                ls += items[i];
-                if (ls.substr(-1, 1) != ';'){
-                    ls += ';'
-                }
-            }
-        }
-        return ls;
-    },
-
-    
/**
-     * @cfg {Ext.Template} fieldTpl
-     * A {@link Ext.Template#compile compile}d {@link Ext.Template} for rendering
-     * the fully wrapped, labeled and styled form Field. Defaults to:

-new Ext.Template(
-    '<div class="x-form-item {itemCls}" tabIndex="-1">',
-        '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
-        '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
-        '</div><div class="{clearCls}"></div>',
-    '</div>'
-);
-

-     * 
This may be specified to produce a different DOM structure when rendering form Fields.

-     * 
A description of the properties within the template follows:

-     * 
Also see {@link #getTemplateArgs}

-     */
-
-    // private
-    renderItem : function(c, position, target){
-        if(c && !c.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
-            var args = this.getTemplateArgs(c);
-            if(typeof position == 'number'){
-                position = target.dom.childNodes[position] || null;
-            }
-            if(position){
-                this.fieldTpl.insertBefore(position, args);
-            }else{
-                this.fieldTpl.append(target, args);
-            }
-            c.render('x-form-el-'+c.id);
-        }else {
-            Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
-        }
-    },
-
-    
/**
-     * 
Provides template arguments for rendering the fully wrapped, labeled and styled form Field.

-     * 
This method returns an object hash containing properties used by the layout's {@link #fieldTpl}
-     * to create a correctly wrapped, labeled and styled form Field. This may be overriden to
-     * create custom layouts. The properties which must be returned are:

-     * @param field The {@link Field Ext.form.Field} being rendered.
-     * @return An object hash containing the properties required to render the Field.
-     */
-    getTemplateArgs: function(field) {
-        var noLabelSep = !field.fieldLabel || field.hideLabel;
-        return {
-            id: field.id,
-            label: field.fieldLabel,
-            labelStyle: field.labelStyle||this.labelStyle||'',
-            elementStyle: this.elementStyle||'',
-            labelSeparator: noLabelSep ? '' : (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator),
-            itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
-            clearCls: field.clearCls || 'x-form-clear-left'
-        };
-    },
-
-    // private
-    adjustWidthAnchor : function(value, comp){
-        return value - (comp.isFormField || comp.fieldLabel  ? (comp.hideLabel ? 0 : this.labelAdjust) : 0);
-    },
-
-    // private
-    isValidParent : function(c, target){
-        return true;
-    }
-
-    
/**
-     * @property activeItem
-     * @hide
-     */
-});
-
-Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;
- - \ No newline at end of file