/* 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

Files

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\n

This 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\n

In 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\n

A 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\n

Any Component (including Fields) managed by FormLayout accepts the following as a config option:\n

    \n
  • anchor
  • \n

\n\n\n\n\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\n

Example 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\n
Defined By

Config options

This configuation option is to be applied to child items of a container managed by\nthis layout (ie. ...

This configuation option is to be applied to child items of a container managed by\nthis layout (ie. configured with layout:'anchor').

\n\n\n
\n\n\n\n\n

This 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:

    \n\n
  • Percentage : Any value between 1 and 100, expressed as a percentage.
    \nThe first anchor is the percentage width that the item should take up within the container, and the\nsecond is the percentage height. For example:\n
    // 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
  • \n\n
  • Offsets : Any positive or negative integer value.
    \nThis is a raw adjustment where the first anchor is the offset from the right edge of the container,\nand the second is the offset from the bottom edge. For example:\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
  • \n\n
  • Sides : Valid values are 'right' (or 'r') and 'bottom'\n(or 'b').
    \nEither the container must have a fixed size or an anchorSize config value defined at render time in\norder for these to have any effect.
  • \n\n
  • Mixed :
    \nAnchor values can also be mixed as needed. For example, to render the width offset from the container\nright edge by 50 pixels and 75% of the container's height use:\n
    anchor: '-50 75%'\n
  • \n\n\n
\n\n

default anchor for all child container items applied if no anchor or specific width is set on the child item. ...

default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'.

\n

Defaults to: '100%'

An optional extra CSS class that will be added to the container. ...

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\n

Note: extraCls defaults to '' except for the following classes\nwhich assign a value by default:\n

\nTo configure the above Classes with an extra CSS class append to the default. For example,\nfor ColumnLayout:\n
extraCls: 'x-column custom-class'\n
\n

\n\n
Ext.layout.FormLayout
view source
: Ext.Template
A compiled Ext.Template for rendering\nthe fully wrapped, labeled and styled form Field. ...

A compiled Ext.Template for rendering\nthe fully wrapped, labeled and styled form Field. Defaults to:

\n\n
new 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\n

This may be specified to produce a different DOM structure when rendering form Fields.

\n\n\n

A description of the properties within the template follows:

\n\n\n
    \n
  • itemCls : String
    The CSS class applied to the outermost div wrapper\nthat contains this field label and field element (the default class is 'x-form-item' and itemCls\nwill be added to that). If supplied, itemCls at the field level will override the default itemCls\nsupplied at the container level.
  • \n
  • id : String
    The id of the Field
  • \n
  • labelStyle : String
    \nA CSS style specification string to add to the field label for this field (defaults to '' or the\nlayout's value for <tt>labelStyle</tt>).
  • \n
  • label : String
    The text to display as the label for this\nfield (defaults to '')
  • \n
  • labelSeparator : String
    The separator to display after\nthe text of the label for this field (defaults to a colon ':' or the\nlayout's value for labelSeparator). To hide the separator use empty string ''.
  • \n
  • elementStyle : String
    The styles text for the input element's wrapper.
  • \n
  • clearCls : String
    The CSS class to apply to the special clearing div\nrendered directly after each form field wrapper (defaults to 'x-form-clear-left')
  • \n
\n\n\n

Also see getTemplateArgs

\n\n
Ext.layout.FormLayout
view source
: String
See Ext.form.FormPanel.labelSeparator. ...

See Ext.form.FormPanel.labelSeparator. Configuration\nof this property at the container level takes precedence.

\n

Defaults to: ':'

True to hide each contained item on render (defaults to false).

\n

True to hide each contained item on render (defaults to false).

\n
Ext.layout.FormLayout
view source
: Boolean
True to show/hide the field label when the field is hidden. ...

True to show/hide the field label when the field is hidden. Defaults to true.

\n

Defaults to: true

Defined By

Properties

The Ext.Template used by Field rendering layout classes (such as\nExt.layout.FormLayout) to create the DOM structure o...

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.

\n

Placeholder for the derived layouts

\n

Placeholder for the derived layouts

\n
Ext.layout.FormLayout
view source
: String
Read only. ...

Read only. The CSS style specification string added to field labels in this layout if not\notherwise specified by each contained field.

\n
private ...

private

\n

Defaults to: true

Overrides: Ext.layout.ContainerLayout.monitorResize

...
\n

Defaults to: /^(r|right|b|bottom)$/i

Ext.layout.FormLayout
view source
: Stringprivate
...
\n

Defaults to: 'form'

Overrides: Ext.layout.AnchorLayout.type

Defined By

Methods

Workaround for how IE measures autoWidth elements. ...

Workaround 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
\n

Parameters

  • target : Object
    \n
  • viewFlag : Object
    \n
Ext.layout.FormLayout
view source
( value, c )private
...
\n

Parameters

  • value : Object
    \n
  • c : Object
    \n

Overrides: Ext.layout.AnchorLayout.adjustHeightAnchor

Ext.layout.FormLayout
view source
( value, c )private
private ...

private

\n

Parameters

  • value : Object
    \n
  • c : Object
    \n

Overrides: Ext.layout.AnchorLayout.adjustWidthAnchor

...
\n

Parameters

  • c : Object
    \n
Applies extraCls and hides the item if renderHidden is true ...

Applies extraCls and hides the item if renderHidden is true

\n

Parameters

  • c : Object
    \n
Destroys this layout. ...

Destroys 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.

\n
Ext.layout.FormLayout
view source
( s )private
private ...

private

\n

Parameters

  • s : Object
    \n
private. ...

private.\nGet all rendered items to lay out.

\n

Parameters

  • ct : Object
    \n
Ext.layout.FormLayout
view source
( field ) : Object
Provides template arguments for rendering the fully wrapped, labeled and styled form Field. ...

Provides template arguments for rendering the fully wrapped, labeled and styled form Field.

\n\n\n

This 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
    \n
  • itemCls : String
    The CSS class applied to the outermost div wrapper\nthat contains this field label and field element (the default class is 'x-form-item' and itemCls\nwill be added to that). If supplied, itemCls at the field level will override the default itemCls\nsupplied at the container level.
  • \n
  • id : String
    The id of the Field
  • \n
  • labelStyle : String
    \nA CSS style specification string to add to the field label for this field (defaults to '' or the\nlayout's value for <tt>labelStyle</tt>).
  • \n
  • label : String
    The text to display as the label for this\nfield (defaults to the field's configured fieldLabel property)
  • \n
  • labelSeparator : String
    The separator to display after\nthe text of the label for this field (defaults to a colon ':' or the\nlayout's value for labelSeparator). To hide the separator use empty string ''.
  • \n
  • elementStyle : String
    The styles text for the input element's wrapper.
  • \n
  • clearCls : String
    The CSS class to apply to the special clearing div\nrendered directly after each form field wrapper (defaults to 'x-form-clear-left')
  • \n
\n\n

Parameters

Returns

  • Object

    An object hash containing the properties required to render the Field.

    \n
Ext.layout.FormLayout
view source
( c )private
private ...

private

\n

Parameters

  • c : Object
    \n
Ext.layout.FormLayout
view source
( c, target )private
private ...

private

\n

Parameters

  • c : Object
    \n
  • target : Object
    \n

Overrides: Ext.layout.ContainerLayout.isValidParent

private ...

private

\n
Ext.layout.FormLayout
view source
( c )private
...
\n

Parameters

  • c : Object
    \n
Ext.layout.FormLayout
view source
( c )private
...
\n

Parameters

  • c : Object
    \n
( container, target )private
private ...

private

\n

Parameters

  • container : Object
    \n
  • target : Object
    \n

Overrides: Ext.layout.ContainerLayout.onLayout

Ext.layout.FormLayout
view source
( c )private
...
\n

Parameters

  • c : Object
    \n

Overrides: Ext.layout.ContainerLayout.onRemove

private ...

private

\n

Parameters

  • a : Object
    \n
  • start : Object
    \n
  • cstart : Object
    \n
Parses a number or string representing margin sizes into an object. ...

Parses 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)

\n

Parameters

Returns

  • Object

    An object with margin sizes for top, right, bottom and left

    \n
private ...

private

\n

Parameters

  • ct : Object
    \n
  • target : Object
    \n
Ext.layout.FormLayout
view source
( c, position, target )private
...
\n

Parameters

  • c : Object
    \n
  • position : Object
    \n
  • target : Object
    \n

Overrides: Ext.layout.ContainerLayout.renderItem

Ext.layout.FormLayout
view source
( ct )private
private ...

private

\n

Parameters

  • ct : Object
    \n

Overrides: Ext.layout.ContainerLayout.setContainer

","superclasses":["Ext.layout.ContainerLayout","Ext.layout.AnchorLayout"],"meta":{},"requires":[],"html_meta":{},"statics":{"property":[],"cfg":[],"css_var":[],"method":[],"event":[],"css_mixin":[]},"files":[{"href":"FormLayout.html#Ext-layout-FormLayout","filename":"FormLayout.js"}],"linenr":1,"members":{"property":[{"tagname":"property","owner":"Ext.layout.ContainerLayout","meta":{},"name":"fieldTpl","id":"property-fieldTpl"},{"tagname":"property","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"getLayoutTargetSize","id":"property-getLayoutTargetSize"},{"tagname":"property","owner":"Ext.layout.FormLayout","meta":{},"name":"labelStyle","id":"property-labelStyle"},{"tagname":"property","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"monitorResize","id":"property-monitorResize"},{"tagname":"property","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"parseAnchorRE","id":"property-parseAnchorRE"},{"tagname":"property","owner":"Ext.layout.FormLayout","meta":{"private":true},"name":"type","id":"property-type"}],"cfg":[{"tagname":"cfg","owner":"Ext.layout.AnchorLayout","meta":{},"name":"anchor","id":"cfg-anchor"},{"tagname":"cfg","owner":"Ext.layout.AnchorLayout","meta":{},"name":"defaultAnchor","id":"cfg-defaultAnchor"},{"tagname":"cfg","owner":"Ext.layout.ContainerLayout","meta":{},"name":"extraCls","id":"cfg-extraCls"},{"tagname":"cfg","owner":"Ext.layout.FormLayout","meta":{},"name":"fieldTpl","id":"cfg-fieldTpl"},{"tagname":"cfg","owner":"Ext.layout.FormLayout","meta":{},"name":"labelSeparator","id":"cfg-labelSeparator"},{"tagname":"cfg","owner":"Ext.layout.ContainerLayout","meta":{},"name":"renderHidden","id":"cfg-renderHidden"},{"tagname":"cfg","owner":"Ext.layout.FormLayout","meta":{},"name":"trackLabels","id":"cfg-trackLabels"}],"css_var":[],"method":[{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{},"name":"constructor","id":"method-constructor"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"IEMeasureHack","id":"method-IEMeasureHack"},{"tagname":"method","owner":"Ext.layout.FormLayout","meta":{"private":true},"name":"adjustHeightAnchor","id":"method-adjustHeightAnchor"},{"tagname":"method","owner":"Ext.layout.FormLayout","meta":{"private":true},"name":"adjustWidthAnchor","id":"method-adjustWidthAnchor"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"afterRemove","id":"method-afterRemove"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"configureItem","id":"method-configureItem"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"protected":true,"private":true},"name":"destroy","id":"method-destroy"},{"tagname":"method","owner":"Ext.layout.FormLayout","meta":{"private":true},"name":"getLabelStyle","id":"method-getLabelStyle"},{"tagname":"method","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"getLayoutTargetSize","id":"method-getLayoutTargetSize"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"getRenderedItems","id":"method-getRenderedItems"},{"tagname":"method","owner":"Ext.layout.FormLayout","meta":{},"name":"getTemplateArgs","id":"method-getTemplateArgs"},{"tagname":"method","owner":"Ext.layout.FormLayout","meta":{"private":true},"name":"isHide","id":"method-isHide"},{"tagname":"method","owner":"Ext.layout.FormLayout","meta":{"private":true},"name":"isValidParent","id":"method-isValidParent"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"layout","id":"method-layout"},{"tagname":"method","owner":"Ext.layout.FormLayout","meta":{"private":true},"name":"onFieldHide","id":"method-onFieldHide"},{"tagname":"method","owner":"Ext.layout.FormLayout","meta":{"private":true},"name":"onFieldShow","id":"method-onFieldShow"},{"tagname":"method","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"onLayout","id":"method-onLayout"},{"tagname":"method","owner":"Ext.layout.FormLayout","meta":{"private":true},"name":"onRemove","id":"method-onRemove"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"onResize","id":"method-onResize"},{"tagname":"method","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"parseAnchor","id":"method-parseAnchor"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{},"name":"parseMargins","id":"method-parseMargins"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"renderAll","id":"method-renderAll"},{"tagname":"method","owner":"Ext.layout.FormLayout","meta":{"private":true},"name":"renderItem","id":"method-renderItem"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"runLayout","id":"method-runLayout"},{"tagname":"method","owner":"Ext.layout.FormLayout","meta":{"private":true},"name":"setContainer","id":"method-setContainer"}],"event":[],"css_mixin":[]},"inheritable":null,"private":null,"component":false,"name":"Ext.layout.FormLayout","singleton":false,"override":null,"inheritdoc":null,"id":"class-Ext.layout.FormLayout","mixins":[],"mixedInto":[]});