source/widgets/layout/FormLayout.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.layout.FormLayout\r
  11  * @extends Ext.layout.AnchorLayout\r
  12  * <p>This layout manager is specifically designed for rendering and managing child Components of forms.\r
  13  * It is responsible for rendering the labels of {@link Ext.form.Field Field}s.</p>\r
  14  * <p>This layout manager is used when a Container is configured with the layout:'form' {@link Ext.Container#layout layout} config,\r
  15  * and should generally not need to be created directly via the new keyword. In an application,\r
  16  * it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel} (which automatically uses FormLayout as its layout\r
  17  * class) since it also provides built-in functionality for loading, validating and submitting the form.</p>\r
  18  * <p>Note that when creating a layout via config, the layout-specific config properties must be passed in via\r
  19  * the {@link Ext.Container#layoutConfig layoutConfig} object which will then be applied internally to the layout.</p>\r
  20  * <p>The {@link Ext.Container Container} <i>using</i> the FormLayout can also accept the following layout-specific config\r
  21  * properties:\r
  22  * <div class="mdetail-params"><ul>\r
  23  * <li><b>hideLabels</b>: (Boolean)<div class="sub-desc">True to hide field labels by default (defaults to false)</div></li>\r
  24  * <li><b>labelAlign</b>: (String)<div class="sub-desc">The default label alignment.  The default value is empty string ''\r
  25  * for left alignment, but specifying 'top' will align the labels above the fields.</div></li>\r
  26  * <li><b>labelPad</b>: (Number)<div class="sub-desc">The default padding in pixels for field labels (defaults to 5).  labelPad only\r
  27  * applies if labelWidth is also specified, otherwise it will be ignored.</div></li>\r
  28  * <li><b>labelWidth</b>: (Number)<div class="sub-desc">The default width in pixels of field labels (defaults to 100)</div></li>\r
  29  * </ul></div></p>\r
  30  * <p>Any type of components can be added to a FormLayout, but items that inherit from {@link Ext.form.Field}\r
  31  * can also supply the following field-specific config properties:\r
  32  * <div class="mdetail-params"><ul>\r
  33  * <li><b>clearCls</b>: (String)<div class="sub-desc">The CSS class to apply to the special clearing div rendered directly after each\r
  34  * form field wrapper (defaults to 'x-form-clear-left')</div></li>\r
  35  * <li><b>fieldLabel</b>: (String)<div class="sub-desc">The text to display as the label for this field (defaults to '')</div></li>\r
  36  * <li><b>hideLabel</b>: (Boolean)<div class="sub-desc">True to hide the label and separator for this field (defaults to false).</div></li>\r
  37  * <li><b>itemCls</b>: (String)<div class="sub-desc">A CSS class to add to the div wrapper that contains this field label\r
  38  * and field element (the default class is 'x-form-item' and itemCls will be added to that).  If supplied,\r
  39  * itemCls at the field level will override the default itemCls supplied at the container level.</div></li>\r
  40  * <li><b>labelSeparator</b>: (String)<div class="sub-desc">The separator to display after the text of the label for this field\r
  41  * (defaults to a colon ':' or the layout's value for {@link #labelSeparator}).  To hide the separator use empty string ''.</div></li>\r
  42  * <li><b>labelStyle</b>: (String)<div class="sub-desc">A CSS style specification string to add to the field label for this field\r
  43  * (defaults to '' or the layout's value for {@link #labelStyle}).</div></li>\r
  44  * </ul></div></p>\r
  45  * Example usage:</p>\r
  46  * <pre><code>\r
  47 // Required if showing validation messages\r
  48 Ext.QuickTips.init();\r
  49 \r
  50 // While you can create a basic Panel with layout:'form', practically\r
  51 // you should usually use a FormPanel to also get its form functionality\r
  52 // since it already creates a FormLayout internally.\r
  53 var form = new Ext.form.FormPanel({\r
  54     labelWidth: 75,\r
  55     title: 'Form Layout',\r
  56     bodyStyle:'padding:15px',\r
  57     width: 350,\r
  58     labelPad: 10,\r
  59     defaultType: 'textfield',\r
  60     defaults: {\r
  61         // applied to each contained item\r
  62         width: 230,\r
  63         msgTarget: 'side'\r
  64     },\r
  65     layoutConfig: {\r
  66         // layout-specific configs go here\r
  67         labelSeparator: ''\r
  68     },\r
  69     items: [{\r
  70             fieldLabel: 'First Name',\r
  71             name: 'first',\r
  72             allowBlank: false\r
  73         },{\r
  74             fieldLabel: 'Last Name',\r
  75             name: 'last'\r
  76         },{\r
  77             fieldLabel: 'Company',\r
  78             name: 'company'\r
  79         },{\r
  80             fieldLabel: 'Email',\r
  81             name: 'email',\r
  82             vtype:'email'\r
  83         }\r
  84     ],\r
  85     buttons: [{\r
  86         text: 'Save'\r
  87     },{\r
  88         text: 'Cancel'\r
  89     }]\r
  90 });\r
  91 </code></pre>\r
  92  */\r
  93 Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {\r
  94     /**\r
  95      * @cfg {String} labelSeparator\r
  96      * The standard separator to display after the text of each form label (defaults to a colon ':').  To turn off\r
  97      * separators for all fields in this layout by default specify empty string '' (if the labelSeparator value is\r
  98      * explicitly set at the field level, those will still be displayed).\r
  99      */\r
 100     labelSeparator : ':',\r
 101 \r
 102     // private\r
 103     getAnchorViewSize : function(ct, target){\r
 104         return (ct.body||ct.el).getStyleSize();\r
 105     },\r
 106 \r
 107     // private\r
 108     setContainer : function(ct){\r
 109         Ext.layout.FormLayout.superclass.setContainer.call(this, ct);\r
 110 \r
 111         if(ct.labelAlign){\r
 112             ct.addClass('x-form-label-'+ct.labelAlign);\r
 113         }\r
 114 \r
 115         if(ct.hideLabels){\r
 116             this.labelStyle = "display:none";\r
 117             this.elementStyle = "padding-left:0;";\r
 118             this.labelAdjust = 0;\r
 119         }else{\r
 120             this.labelSeparator = ct.labelSeparator || this.labelSeparator;\r
 121             ct.labelWidth = ct.labelWidth || 100;\r
 122             if(typeof ct.labelWidth == 'number'){\r
 123                 var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);\r
 124                 this.labelAdjust = ct.labelWidth+pad;\r
 125                 this.labelStyle = "width:"+ct.labelWidth+"px;";\r
 126                 this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';\r
 127             }\r
 128             if(ct.labelAlign == 'top'){\r
 129                 this.labelStyle = "width:auto;";\r
 130                 this.labelAdjust = 0;\r
 131                 this.elementStyle = "padding-left:0;";\r
 132             }\r
 133         }\r
 134 \r
 135         if(!this.fieldTpl){\r
 136             // the default field template used by all form layouts\r
 137             var t = new Ext.Template(\r
 138                 '<div class="x-form-item {5}" tabIndex="-1">',\r
 139                     '<label for="{0}" style="{2}" class="x-form-item-label">{1}{4}</label>',\r
 140                     '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',\r
 141                     '</div><div class="{6}"></div>',\r
 142                 '</div>'\r
 143             );\r
 144             t.disableFormats = true;\r
 145             t.compile();\r
 146             Ext.layout.FormLayout.prototype.fieldTpl = t;\r
 147         }\r
 148     },\r
 149     \r
 150     //private\r
 151     getLabelStyle: function(s){\r
 152         var ls = '', items = [this.labelStyle, s];\r
 153         for (var i = 0, len = items.length; i < len; ++i){\r
 154             if (items[i]){\r
 155                 ls += items[i];\r
 156                 if (ls.substr(-1, 1) != ';'){\r
 157                     ls += ';'\r
 158                 }\r
 159             }\r
 160         }\r
 161         return ls;\r
 162     },\r
 163 \r
 164     // private\r
 165     renderItem : function(c, position, target){\r
 166         if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){\r
 167             var args = [\r
 168                    c.id, c.fieldLabel,\r
 169                    this.getLabelStyle(c.labelStyle),\r
 170                    this.elementStyle||'',\r
 171                    typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,\r
 172                    (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),\r
 173                    c.clearCls || 'x-form-clear-left' \r
 174             ];\r
 175             if(typeof position == 'number'){\r
 176                 position = target.dom.childNodes[position] || null;\r
 177             }\r
 178             if(position){\r
 179                 this.fieldTpl.insertBefore(position, args);\r
 180             }else{\r
 181                 this.fieldTpl.append(target, args);\r
 182             }\r
 183             c.render('x-form-el-'+c.id);\r
 184         }else {\r
 185             Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);\r
 186         }\r
 187     },\r
 188 \r
 189     // private\r
 190     adjustWidthAnchor : function(value, comp){\r
 191         return value - (comp.isFormField  ? (comp.hideLabel ? 0 : this.labelAdjust) : 0);\r
 192     },\r
 193 \r
 194     // private\r
 195     isValidParent : function(c, target){\r
 196         return true;\r
 197     }\r
 198 \r
 199     /**\r
 200      * @property activeItem\r
 201      * @hide\r
 202      */\r
 203 });\r
 204 \r
 205 Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;