X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/FormLayout.html diff --git a/docs/source/FormLayout.html b/docs/source/FormLayout.html new file mode 100644 index 00000000..56299397 --- /dev/null +++ b/docs/source/FormLayout.html @@ -0,0 +1,269 @@ + + + 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