+++ /dev/null
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-/**\r
- * @class Ext.layout.FormLayout\r
- * @extends Ext.layout.AnchorLayout\r
- * <p>This layout manager is specifically designed for rendering and managing child Components of forms.\r
- * It is responsible for rendering the labels of {@link Ext.form.Field Field}s.</p>\r
- * <p>This layout manager is used when a Container is configured with the layout:'form' {@link Ext.Container#layout layout} config,\r
- * and should generally not need to be created directly via the new keyword. In an application,\r
- * it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel} (which automatically uses FormLayout as its layout\r
- * class) since it also provides built-in functionality for loading, validating and submitting the form.</p>\r
- * <p>Note that when creating a layout via config, the layout-specific config properties must be passed in via\r
- * the {@link Ext.Container#layoutConfig layoutConfig} object which will then be applied internally to the layout.</p>\r
- * <p>The {@link Ext.Container Container} <i>using</i> the FormLayout can also accept the following layout-specific config\r
- * properties:\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>hideLabels</b>: (Boolean)<div class="sub-desc">True to hide field labels by default (defaults to false)</div></li>\r
- * <li><b>labelAlign</b>: (String)<div class="sub-desc">The default label alignment. The default value is empty string ''\r
- * for left alignment, but specifying 'top' will align the labels above the fields.</div></li>\r
- * <li><b>labelPad</b>: (Number)<div class="sub-desc">The default padding in pixels for field labels (defaults to 5). labelPad only\r
- * applies if labelWidth is also specified, otherwise it will be ignored.</div></li>\r
- * <li><b>labelWidth</b>: (Number)<div class="sub-desc">The default width in pixels of field labels (defaults to 100)</div></li>\r
- * </ul></div></p>\r
- * <p>Any type of components can be added to a FormLayout, but items that inherit from {@link Ext.form.Field}\r
- * can also supply the following field-specific config properties:\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>clearCls</b>: (String)<div class="sub-desc">The CSS class to apply to the special clearing div rendered directly after each\r
- * form field wrapper (defaults to 'x-form-clear-left')</div></li>\r
- * <li><b>fieldLabel</b>: (String)<div class="sub-desc">The text to display as the label for this field (defaults to '')</div></li>\r
- * <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
- * <li><b>itemCls</b>: (String)<div class="sub-desc">A CSS class to add to the div wrapper that contains this field label\r
- * and field element (the default class is 'x-form-item' and itemCls will be added to that). If supplied,\r
- * itemCls at the field level will override the default itemCls supplied at the container level.</div></li>\r
- * <li><b>labelSeparator</b>: (String)<div class="sub-desc">The separator to display after the text of the label for this field\r
- * (defaults to a colon ':' or the layout's value for {@link #labelSeparator}). To hide the separator use empty string ''.</div></li>\r
- * <li><b>labelStyle</b>: (String)<div class="sub-desc">A CSS style specification string to add to the field label for this field\r
- * (defaults to '' or the layout's value for {@link #labelStyle}).</div></li>\r
- * </ul></div></p>\r
- * Example usage:</p>\r
- * <pre><code>\r
-// Required if showing validation messages\r
-Ext.QuickTips.init();\r
-\r
-// While you can create a basic Panel with layout:'form', practically\r
-// you should usually use a FormPanel to also get its form functionality\r
-// since it already creates a FormLayout internally.\r
-var form = new Ext.form.FormPanel({\r
- labelWidth: 75,\r
- title: 'Form Layout',\r
- bodyStyle:'padding:15px',\r
- width: 350,\r
- labelPad: 10,\r
- defaultType: 'textfield',\r
- defaults: {\r
- // applied to each contained item\r
- width: 230,\r
- msgTarget: 'side'\r
- },\r
- layoutConfig: {\r
- // layout-specific configs go here\r
- labelSeparator: ''\r
- },\r
- items: [{\r
- fieldLabel: 'First Name',\r
- name: 'first',\r
- allowBlank: false\r
- },{\r
- fieldLabel: 'Last Name',\r
- name: 'last'\r
- },{\r
- fieldLabel: 'Company',\r
- name: 'company'\r
- },{\r
- fieldLabel: 'Email',\r
- name: 'email',\r
- vtype:'email'\r
- }\r
- ],\r
- buttons: [{\r
- text: 'Save'\r
- },{\r
- text: 'Cancel'\r
- }]\r
-});\r
-</code></pre>\r
- */\r
-Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {\r
- /**\r
- * @cfg {String} labelSeparator\r
- * The standard separator to display after the text of each form label (defaults to a colon ':'). To turn off\r
- * separators for all fields in this layout by default specify empty string '' (if the labelSeparator value is\r
- * explicitly set at the field level, those will still be displayed).\r
- */\r
- labelSeparator : ':',\r
-\r
- // private\r
- getAnchorViewSize : function(ct, target){\r
- return (ct.body||ct.el).getStyleSize();\r
- },\r
-\r
- // private\r
- setContainer : function(ct){\r
- Ext.layout.FormLayout.superclass.setContainer.call(this, ct);\r
-\r
- if(ct.labelAlign){\r
- ct.addClass('x-form-label-'+ct.labelAlign);\r
- }\r
-\r
- if(ct.hideLabels){\r
- this.labelStyle = "display:none";\r
- this.elementStyle = "padding-left:0;";\r
- this.labelAdjust = 0;\r
- }else{\r
- this.labelSeparator = ct.labelSeparator || this.labelSeparator;\r
- ct.labelWidth = ct.labelWidth || 100;\r
- if(typeof ct.labelWidth == 'number'){\r
- var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);\r
- this.labelAdjust = ct.labelWidth+pad;\r
- this.labelStyle = "width:"+ct.labelWidth+"px;";\r
- this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';\r
- }\r
- if(ct.labelAlign == 'top'){\r
- this.labelStyle = "width:auto;";\r
- this.labelAdjust = 0;\r
- this.elementStyle = "padding-left:0;";\r
- }\r
- }\r
-\r
- if(!this.fieldTpl){\r
- // the default field template used by all form layouts\r
- var t = new Ext.Template(\r
- '<div class="x-form-item {5}" tabIndex="-1">',\r
- '<label for="{0}" style="{2}" class="x-form-item-label">{1}{4}</label>',\r
- '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',\r
- '</div><div class="{6}"></div>',\r
- '</div>'\r
- );\r
- t.disableFormats = true;\r
- t.compile();\r
- Ext.layout.FormLayout.prototype.fieldTpl = t;\r
- }\r
- },\r
- \r
- //private\r
- getLabelStyle: function(s){\r
- var ls = '', items = [this.labelStyle, s];\r
- for (var i = 0, len = items.length; i < len; ++i){\r
- if (items[i]){\r
- ls += items[i];\r
- if (ls.substr(-1, 1) != ';'){\r
- ls += ';'\r
- }\r
- }\r
- }\r
- return ls;\r
- },\r
-\r
- // private\r
- renderItem : function(c, position, target){\r
- if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){\r
- var args = [\r
- c.id, c.fieldLabel,\r
- this.getLabelStyle(c.labelStyle),\r
- this.elementStyle||'',\r
- typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,\r
- (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),\r
- c.clearCls || 'x-form-clear-left' \r
- ];\r
- if(typeof position == 'number'){\r
- position = target.dom.childNodes[position] || null;\r
- }\r
- if(position){\r
- this.fieldTpl.insertBefore(position, args);\r
- }else{\r
- this.fieldTpl.append(target, args);\r
- }\r
- c.render('x-form-el-'+c.id);\r
- }else {\r
- Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);\r
- }\r
- },\r
-\r
- // private\r
- adjustWidthAnchor : function(value, comp){\r
- return value - (comp.isFormField ? (comp.hideLabel ? 0 : this.labelAdjust) : 0);\r
- },\r
-\r
- // private\r
- isValidParent : function(c, target){\r
- return true;\r
- }\r
-\r
- /**\r
- * @property activeItem\r
- * @hide\r
- */\r
-});\r
-\r
-Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff