/* This file is part of Ext JS 3.4 Copyright (c) 2011-2013 Sencha Inc Contact: http://www.sencha.com/contact GNU General Public License Usage This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. Build date: 2013-04-03 15:07:25 */ Ext.data.JsonP.Ext_layout_FormLayout({"alternateClassNames":[],"aliases":{},"enum":null,"parentMixins":[],"tagname":"class","subclasses":[],"extends":"Ext.layout.AnchorLayout","uses":[],"html":"
Hierarchy
Ext.layout.ContainerLayoutExt.layout.AnchorLayoutExt.layout.FormLayoutFiles
This layout manager is specifically designed for rendering and managing child Components of\nforms. It is responsible for rendering the labels of\nFields.
\n\n\n\n\nThis layout manager is used when a Container is configured with the layout:'form'\nlayout config option, and should generally not need to be created directly\nvia the new keyword. See Ext.Container.layout for additional details.
\n\n\n\n\nIn an application, it will usually be preferrable to use a FormPanel\n(which is configured with FormLayout as its layout class by default) since it also provides built-in\nfunctionality for loading, validating and submitting the form.
\n\n\n\n\nA Container using the FormLayout layout manager (e.g.\nExt.form.FormPanel or specifying layout:'form') can also accept the following\nlayout-specific config properties:
\n\n\n\n\nAny Component (including Fields) managed by FormLayout accepts the following as a config option:\n
Any Component managed by FormLayout may be rendered as a form field (with an associated label) by\nconfiguring it with a non-null fieldLabel. Components configured\nin this way may be configured with the following options which affect the way the FormLayout renders them:\n
\n\n\n\n\nExample usage:
\n\n\n// Required if showing validation messages\nExt.QuickTips.init();\n\n// While you can create a basic Panel with layout:'form', practically\n// you should usually use a FormPanel to also get its form functionality\n// since it already creates a FormLayout internally.\nvar form = new Ext.form.FormPanel({\n title: 'Form Layout',\n bodyStyle: 'padding:15px',\n width: 350,\n defaultType: 'textfield',\n defaults: {\n // applied to each contained item\n width: 230,\n msgTarget: 'side'\n },\n items: [{\n fieldLabel: 'First Name',\n name: 'first',\n allowBlank: false,\n labelSeparator: ':' // override labelSeparator layout config\n },{\n fieldLabel: 'Last Name',\n name: 'last'\n },{\n fieldLabel: 'Email',\n name: 'email',\n vtype:'email'\n }, {\n xtype: 'textarea',\n hideLabel: true, // override hideLabels layout config\n name: 'msg',\n anchor: '100% -53'\n }\n ],\n buttons: [\n {text: 'Save'},\n {text: 'Cancel'}\n ],\n layoutConfig: {\n labelSeparator: '~' // superseded by assignment below\n },\n // config options applicable to container when layout='form':\n hideLabels: false,\n labelAlign: 'left', // or 'right' or 'top'\n labelSeparator: '>>', // takes precedence over layoutConfig value\n labelWidth: 65, // defaults to 100\n labelPad: 8 // defaults to 5, must specify labelWidth to be honored\n});\n
\n\nThis configuation option is to be applied to child items of a container managed by\nthis layout (ie. configured with layout:'anchor').
\n\n\nThis value is what tells the layout how an item should be anchored to the container. items\nadded to an AnchorLayout accept an anchoring-specific config property of anchor which is a string\ncontaining two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').\nThe following types of anchor values are supported:
// two values specified\nanchor: '100% 50%' // render item complete width of the container and\n // 1/2 height of the container\n// one value specified\nanchor: '100%' // the width value; the height will default to auto\n
// two values specified\nanchor: '-50 -100' // render item the complete width of the container\n // minus 50 pixels and\n // the complete height minus 100 pixels.\n// one value specified\nanchor: '-50' // anchor value is assumed to be the right offset value\n // bottom offset will default to 0\n
anchor: '-50 75%'\n
default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'.
\nDefaults to: '100%'
An optional extra CSS class that will be added to the container. This can be useful for adding\ncustomized styles to the container or any of its children using standard CSS rules. See\nExt.Component.ctCls also.
\n\n\nNote: extraCls defaults to '' except for the following classes\nwhich assign a value by default:\n
extraCls: 'x-column custom-class'\n
\n\n\nA compiled Ext.Template for rendering\nthe fully wrapped, labeled and styled form Field. Defaults to:
\n\nnew Ext.Template(\n '<div class=\"x-form-item {itemCls}\" tabIndex=\"-1\">',\n '<label for=\"{id}\" style=\"{labelStyle}\" class=\"x-form-item-label\">{label}{labelSeparator}</label>',\n '<div class=\"x-form-element\" id=\"x-form-el-{id}\" style=\"{elementStyle}\">',\n '</div><div class=\"{clearCls}\"></div>',\n '</div>'\n);\n
\n\n\nThis may be specified to produce a different DOM structure when rendering form Fields.
\n\n\nA description of the properties within the template follows:
\n\n\nAlso see getTemplateArgs
\n\nSee Ext.form.FormPanel.labelSeparator. Configuration\nof this property at the container level takes precedence.
\nDefaults to: ':'
True to hide each contained item on render (defaults to false).
\nTrue to hide each contained item on render (defaults to false).
\nTrue to show/hide the field label when the field is hidden. Defaults to true.
\nDefaults to: true
The Ext.Template used by Field rendering layout classes (such as\nExt.layout.FormLayout) to create the DOM structure of a fully wrapped,\nlabeled and styled form Field. A default Template is supplied, but this may be\noverriden to create custom field structures. The template processes values returned from\nExt.layout.FormLayout.getTemplateArgs.
\nPlaceholder for the derived layouts
\nPlaceholder for the derived layouts
\nRead only. The CSS style specification string added to field labels in this layout if not\notherwise specified by each contained field.
\nWorkaround for how IE measures autoWidth elements. It prefers bottom-up measurements
\n\n whereas other browser prefer top-down. We will hide all target child elements before we measure and\n put them back to get an accurate measurement.\n
\nApplies extraCls and hides the item if renderHidden is true
\nDestroys this layout. This is a template method that is empty by default, but should be implemented\nby subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
\nprivate.\nGet all rendered items to lay out.
\nProvides template arguments for rendering the fully wrapped, labeled and styled form Field.
\n\n\nThis method returns an object hash containing properties used by the layout's fieldTpl\nto create a correctly wrapped, labeled and styled form Field. This may be overriden to\ncreate custom layouts. The properties which must be returned are:
\n\n\n(Ext.form.Field} field The Field being rendered.
\nAn object hash containing the properties required to render the Field.
\nprivate
\nOverrides: Ext.layout.ContainerLayout.onLayout
private
\nParses a number or string representing margin sizes into an object. Supports CSS-style margin declarations\n(e.g. 10, \"10\", \"10 10\", \"10 10 10\" and \"10 10 10 10\" are all valid options and would return the same result)
\nAn object with margin sizes for top, right, bottom and left
\nOverrides: Ext.layout.ContainerLayout.renderItem