src/widgets/layout/FormLayout.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.layout.FormLayout
   9  * @extends Ext.layout.AnchorLayout
  10  * <p>This layout manager is specifically designed for rendering and managing child Components of
  11  * {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of
  12  * {@link Ext.form.Field Field}s.</p>
  13  *
  14  * <p>This layout manager is used when a Container is configured with the <tt>layout:'form'</tt>
  15  * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly
  16  * via the new keyword. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
  17  *
  18  * <p>In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel}
  19  * (which is configured with FormLayout as its layout class by default) since it also provides built-in
  20  * functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.</p>
  21  *
  22  * <p>A {@link Ext.Container Container} <i>using</i> the FormLayout layout manager (e.g.
  23  * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>) can also accept the following
  24  * layout-specific config properties:<div class="mdetail-params"><ul>
  25  * <li><b><tt>{@link Ext.form.FormPanel#hideLabels hideLabels}</tt></b></li>
  26  * <li><b><tt>{@link Ext.form.FormPanel#labelAlign labelAlign}</tt></b></li>
  27  * <li><b><tt>{@link Ext.form.FormPanel#labelPad labelPad}</tt></b></li>
  28  * <li><b><tt>{@link Ext.form.FormPanel#labelSeparator labelSeparator}</tt></b></li>
  29  * <li><b><tt>{@link Ext.form.FormPanel#labelWidth labelWidth}</tt></b></li>
  30  * </ul></div></p>
  31  *
  32  * <p>Any Component (including Fields) managed by FormLayout accepts the following as a config option:
  33  * <div class="mdetail-params"><ul>
  34  * <li><b><tt>{@link Ext.Component#anchor anchor}</tt></b></li>
  35  * </ul></div></p>
  36  *
  37  * <p>Any Component managed by FormLayout may be rendered as a form field (with an associated label) by
  38  * configuring it with a non-null <b><tt>{@link Ext.Component#fieldLabel fieldLabel}</tt></b>. Components configured
  39  * in this way may be configured with the following options which affect the way the FormLayout renders them:
  40  * <div class="mdetail-params"><ul>
  41  * <li><b><tt>{@link Ext.Component#clearCls clearCls}</tt></b></li>
  42  * <li><b><tt>{@link Ext.Component#fieldLabel fieldLabel}</tt></b></li>
  43  * <li><b><tt>{@link Ext.Component#hideLabel hideLabel}</tt></b></li>
  44  * <li><b><tt>{@link Ext.Component#itemCls itemCls}</tt></b></li>
  45  * <li><b><tt>{@link Ext.Component#labelSeparator labelSeparator}</tt></b></li>
  46  * <li><b><tt>{@link Ext.Component#labelStyle labelStyle}</tt></b></li>
  47  * </ul></div></p>
  48  *
  49  * <p>Example usage:</p>
  50  * <pre><code>
  51 // Required if showing validation messages
  52 Ext.QuickTips.init();
  53
  54 // While you can create a basic Panel with layout:'form', practically
  55 // you should usually use a FormPanel to also get its form functionality
  56 // since it already creates a FormLayout internally.
  57 var form = new Ext.form.FormPanel({
  58     title: 'Form Layout',
  59     bodyStyle: 'padding:15px',
  60     width: 350,
  61     defaultType: 'textfield',
  62     defaults: {
  63         // applied to each contained item
  64         width: 230,
  65         msgTarget: 'side'
  66     },
  67     items: [{
  68             fieldLabel: 'First Name',
  69             name: 'first',
  70             allowBlank: false,
  71             {@link Ext.Component#labelSeparator labelSeparator}: ':' // override labelSeparator layout config
  72         },{
  73             fieldLabel: 'Last Name',
  74             name: 'last'
  75         },{
  76             fieldLabel: 'Email',
  77             name: 'email',
  78             vtype:'email'
  79         }, {
  80             xtype: 'textarea',
  81             hideLabel: true,     // override hideLabels layout config
  82             name: 'msg',
  83             anchor: '100% -53'
  84         }
  85     ],
  86     buttons: [
  87         {text: 'Save'},
  88         {text: 'Cancel'}
  89     ],
  90     layoutConfig: {
  91         {@link #labelSeparator}: '~' // superseded by assignment below
  92     },
  93     // config options applicable to container when layout='form':
  94     hideLabels: false,
  95     labelAlign: 'left',   // or 'right' or 'top'
  96     {@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value
  97     labelWidth: 65,       // defaults to 100
  98     labelPad: 8           // defaults to 5, must specify labelWidth to be honored
  99 });
 100 </code></pre>
 101  */
 102 Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {
 103
 104     /**
 105      * @cfg {String} labelSeparator
 106      * See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}.  Configuration
 107      * of this property at the <b>container</b> level takes precedence.
 108      */
 109     labelSeparator : ':',
 110
 111     /**
 112      * Read only. The CSS style specification string added to field labels in this layout if not
 113      * otherwise {@link Ext.Component#labelStyle specified by each contained field}.
 114      * @type String
 115      * @property labelStyle
 116      */
 117
 118     // private
 119     setContainer : function(ct){
 120         Ext.layout.FormLayout.superclass.setContainer.call(this, ct);
 121         if(ct.labelAlign){
 122             ct.addClass('x-form-label-'+ct.labelAlign);
 123         }
 124
 125         if(ct.hideLabels){
 126             this.labelStyle = "display:none";
 127             this.elementStyle = "padding-left:0;";
 128             this.labelAdjust = 0;
 129         }else{
 130             this.labelSeparator = ct.labelSeparator || this.labelSeparator;
 131             ct.labelWidth = ct.labelWidth || 100;
 132             if(typeof ct.labelWidth == 'number'){
 133                 var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);
 134                 this.labelAdjust = ct.labelWidth+pad;
 135                 this.labelStyle = "width:"+ct.labelWidth+"px;";
 136                 this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';
 137             }
 138             if(ct.labelAlign == 'top'){
 139                 this.labelStyle = "width:auto;";
 140                 this.labelAdjust = 0;
 141                 this.elementStyle = "padding-left:0;";
 142             }
 143         }
 144     },
 145
 146     //private
 147     getLabelStyle: function(s){
 148         var ls = '', items = [this.labelStyle, s];
 149         for (var i = 0, len = items.length; i < len; ++i){
 150             if (items[i]){
 151                 ls += items[i];
 152                 if (ls.substr(-1, 1) != ';'){
 153                     ls += ';'
 154                 }
 155             }
 156         }
 157         return ls;
 158     },
 159
 160     /**
 161      * @cfg {Ext.Template} fieldTpl
 162      * A {@link Ext.Template#compile compile}d {@link Ext.Template} for rendering
 163      * the fully wrapped, labeled and styled form Field. Defaults to:</p><pre><code>
 164 new Ext.Template(
 165     &#39;&lt;div class="x-form-item {itemCls}" tabIndex="-1">&#39;,
 166         &#39;&lt;&#108;abel for="{id}" style="{labelStyle}" class="x-form-item-&#108;abel">{&#108;abel}{labelSeparator}&lt;/&#108;abel>&#39;,
 167         &#39;&lt;div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">&#39;,
 168         &#39;&lt;/div>&lt;div class="{clearCls}">&lt;/div>&#39;,
 169     '&lt;/div>'
 170 );
 171 </code></pre>
 172      * <p>This may be specified to produce a different DOM structure when rendering form Fields.</p>
 173      * <p>A description of the properties within the template follows:</p><div class="mdetail-params"><ul>
 174      * <li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper
 175      * that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt>
 176      * will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt>
 177      * supplied at the container level.</div></li>
 178      * <li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li>
 179      * <li><b><tt>{@link #labelStyle}</tt></b> : String<div class="sub-desc">
 180      * A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the
 181      * {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li>
 182      * <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this
 183      * field (defaults to <tt>''</tt>)</div></li>
 184      * <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after
 185      * the text of the label for this field (defaults to a colon <tt>':'</tt> or the
 186      * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li>
 187      * <li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li>
 188      * <li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div
 189      * rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li>
 190      * </ul></div>
 191      * <p>Also see <tt>{@link #getTemplateArgs}</tt></p>
 192      */
 193
 194     // private
 195     renderItem : function(c, position, target){
 196         if(c && !c.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
 197             var args = this.getTemplateArgs(c);
 198             if(typeof position == 'number'){
 199                 position = target.dom.childNodes[position] || null;
 200             }
 201             if(position){
 202                 this.fieldTpl.insertBefore(position, args);
 203             }else{
 204                 this.fieldTpl.append(target, args);
 205             }
 206             c.render('x-form-el-'+c.id);
 207         }else {
 208             Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
 209         }
 210     },
 211
 212     /**
 213      * <p>Provides template arguments for rendering the fully wrapped, labeled and styled form Field.</p>
 214      * <p>This method returns an object hash containing properties used by the layout's {@link #fieldTpl}
 215      * to create a correctly wrapped, labeled and styled form Field. This may be overriden to
 216      * create custom layouts. The properties which must be returned are:</p><div class="mdetail-params"><ul>
 217      * <li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper
 218      * that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt>
 219      * will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt>
 220      * supplied at the container level.</div></li>
 221      * <li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li>
 222      * <li><b><tt>{@link #labelStyle}</tt></b> : String<div class="sub-desc">
 223      * A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the
 224      * {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li>
 225      * <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this
 226      * field (defaults to <tt>''</tt>)</div></li>
 227      * <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after
 228      * the text of the label for this field (defaults to a colon <tt>':'</tt> or the
 229      * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li>
 230      * <li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li>
 231      * <li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div
 232      * rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li>
 233      * </ul></div>
 234      * @param field The {@link Field Ext.form.Field} being rendered.
 235      * @return An object hash containing the properties required to render the Field.
 236      */
 237     getTemplateArgs: function(field) {
 238         var noLabelSep = !field.fieldLabel || field.hideLabel;
 239         return {
 240             id: field.id,
 241             label: field.fieldLabel,
 242             labelStyle: field.labelStyle||this.labelStyle||'',
 243             elementStyle: this.elementStyle||'',
 244             labelSeparator: noLabelSep ? '' : (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator),
 245             itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
 246             clearCls: field.clearCls || 'x-form-clear-left'
 247         };
 248     },
 249
 250     // private
 251     adjustWidthAnchor : function(value, comp){
 252         return value - (comp.isFormField || comp.fieldLabel  ? (comp.hideLabel ? 0 : this.labelAdjust) : 0);
 253     },
 254
 255     // private
 256     isValidParent : function(c, target){
 257         return true;
 258     }
 259
 260     /**
 261      * @property activeItem
 262      * @hide
 263      */
 264 });
 265
 266 Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;