Ext.data.JsonP.Ext_layout_container_Form({"alternateClassNames":["Ext.layout.FormLayout"],"aliases":{"layout":["form"]},"enum":null,"parentMixins":["Ext.util.ElementContainer"],"tagname":"class","subclasses":[],"extends":"Ext.layout.container.Container","uses":[],"html":"

Alternate names

Ext.layout.FormLayout

Hierarchy

Inherited mixins

Files

This is a layout that will render form Fields, one under the other all stretched to the Container width.

\n\n
Ext.create('Ext.Panel', {\n    width: 500,\n    height: 300,\n    title: \"FormLayout Panel\",\n    layout: 'form',\n    renderTo: Ext.getBody(),\n    bodyPadding: 5,\n    defaultType: 'textfield',\n    items: [{\n       fieldLabel: 'First Name',\n        name: 'first',\n        allowBlank:false\n    },{\n        fieldLabel: 'Last Name',\n        name: 'last'\n    },{\n        fieldLabel: 'Company',\n        name: 'company'\n    }, {\n        fieldLabel: 'Email',\n        name: 'email',\n        vtype:'email'\n    }, {\n        fieldLabel: 'DOB',\n        name: 'dob',\n        xtype: 'datefield'\n    }, {\n        fieldLabel: 'Age',\n        name: 'age',\n        xtype: 'numberfield',\n        minValue: 0,\n        maxValue: 100\n    }, {\n        xtype: 'timefield',\n        fieldLabel: 'Time',\n        name: 'time',\n        minValue: '8:00am',\n        maxValue: '6:00pm'\n    }]\n});\n
\n\n

Note that any configured padding will be ignored on items within a Form layout.

\n
Defined By

Config options

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\nadding customized styles to the container or any of its children using standard CSS\nrules. See Ext.Component.componentCls also.

\n

Properties

Defined By

Instance Properties

...
\n

Defaults to: 'Ext.Base'

An object which contains boolean properties specifying which properties are to be\nanimated upon flush of child Compon...

An object which contains boolean properties specifying which properties are to be\nanimated upon flush of child Component ContextItems. For example, Accordion would\nhave:

\n\n
 {\n     y: true,\n     height: true\n }\n
\n
...
\n

Defaults to: {readsWidth: 1, readsHeight: 1, setsWidth: 0, setsHeight: 0}

Ext.layout.container.Form
view source
: Arrayprivate
...
\n

Defaults to: ['formTable']

Overrides: Ext.layout.container.Container.childEls

...
\n

Defaults to: {}

Ext.layout.container.Form
view source
: Booleanprivate
...
\n

Defaults to: true

Used only during a layout run, this value indicates that a\nlayout has finished its calculations. ...

Used only during a layout run, this value indicates that a\nlayout has finished its calculations. This flag is set to true prior to the call to\ncalculate and should be set to false if this layout has more work to do.

\n
Ext.layout.container.Form
view source
: Object
Returns flags indicating cross-browser handling of scrollHeight/Width. ...

Returns flags indicating cross-browser handling of scrollHeight/Width. In particular,\nIE has issues with padding-bottom in a scrolling element (it does not include that\npadding in the scrollHeight). Also, margin-bottom on a child in a scrolling element\ncan be lost.

\n\n

All browsers seem to ignore margin-right on children and padding-right on the parent\nelement (the one with the overflow)

\n\n

This method returns a number with the follow bit positions set based on things not\naccounted for in scrollHeight and scrollWidth:

\n\n
    \n
  • 1: Scrolling element's padding-bottom is not included in scrollHeight.
  • \n
  • 2: Last child's margin-bottom is not included in scrollHeight.
  • \n
  • 4: Scrolling element's padding-right is not included in scrollWidth.
  • \n
  • 8: Child's margin-right is not included in scrollWidth.
  • \n
\n\n\n

To work around the margin-bottom issue, it is sufficient to create a 0px tall last\nchild that will \"hide\" the margin. This can also be handled by wrapping the children\nin an element, again \"hiding\" the margin. Wrapping the elements is about the only\nway to preserve their right margins. This is the strategy used by Column layout.

\n\n

To work around the padding-bottom problem, since it is comes from a style on the\nparent element, about the only simple fix is to create a last child with height\nequal to padding-bottom. To preserve the right padding, the sizing element needs to\nhave a width that includes the right padding.

\n
...
\n

Defaults to: []

...
\n

Defaults to: {}

...
\n

Defaults to: false

...
\n

Defaults to: true

true in this class to identify an object as an instantiated Layout, or subclass thereof. ...

true in this class to identify an object as an instantiated Layout, or subclass thereof.

\n

Defaults to: true

Ext.layout.container.Form
view source
: Objectprivate
Begin with no previous adjustments ...

Begin with no previous adjustments

\n

Defaults to: {width: 0, height: 0}

Ext.layout.container.Form
view source
: Booleanprivate
...
\n

Defaults to: true

The element used to correct body padding during overflow.

\n

The element used to correct body padding during overflow.

\n
Ext.layout.container.Form
view source
: Stringprivate
...
\n

Defaults to: '<tr><td class="' + Ext.baseCSSPrefix + 'form-item-pad" colspan="3"></td></tr>'

Ext.layout.container.Form
view source
: Arrayprivate
...
\n

Defaults to: ['<table id="{ownerId}-formTable" class="{tableCls}" style="width:100%" cellpadding="0">', '{%this.renderBody(out,values)%}', '</table>', '{%this.renderPadder(out,values)%}']

Overrides: Ext.layout.container.Container.renderTpl

...
\n

Defaults to: false

Get the reference to the current class from which this object was instantiated. ...

Get the reference to the current class from which this object was instantiated. Unlike statics,\nthis.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics\nfor a detailed comparison

\n\n
Ext.define('My.Cat', {\n    statics: {\n        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n    },\n\n    constructor: function() {\n        alert(this.self.speciesName); // dependent on 'this'\n    },\n\n    clone: function() {\n        return new this.self();\n    }\n});\n\n\nExt.define('My.SnowLeopard', {\n    extend: 'My.Cat',\n    statics: {\n        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'\n    }\n});\n\nvar cat = new My.Cat();                     // alerts 'Cat'\nvar snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'\n
\n
Ext.layout.container.Form
view source
: Stringprivate
End Definitions ...

End Definitions

\n

Defaults to: Ext.baseCSSPrefix + 'form-layout-table'

Ext.layout.container.Form
view source
: Stringprivate
...
\n

Defaults to: 'form'

Overrides: Ext.layout.container.Container.type

Defined By

Static Properties

...
\n

Defaults to: []

Methods

Defined By

Instance Methods

Adds each argument passed to this method to the childEls array. ...

Adds each argument passed to this method to the childEls array.

\n
Removes layout's itemCls and owning Container's itemCls. ...

Removes layout's itemCls and owning Container's itemCls.\nClears the managed dimensions flags

\n

Parameters

Sets references to elements inside the component. ...

Sets references to elements inside the component.

\n

Parameters

Called by an owning Panel before the Panel begins its collapse process. ...

Called by an owning Panel before the Panel begins its collapse process.\nMost layouts will not need to override the default Ext.emptyFn implementation.

\n
Called by an owning Panel before the Panel begins its expand process. ...

Called by an owning Panel before the Panel begins its expand process.\nMost layouts will not need to override the default Ext.emptyFn implementation.

\n
In addition to work done by our base classes, containers benefit from some extra\ncached data. ...

In addition to work done by our base classes, containers benefit from some extra\ncached data. The following properties are added to the ownerContext:

\n\n
    \n
  • visibleItems: the result of getVisibleItems
  • \n
  • childItems: the ContextItem[] for each visible item
  • \n
  • targetContext: the ContextItem for the getTarget element
  • \n
\n\n

Parameters

Overrides: Ext.layout.Layout.beginLayout

Ext.layout.container.Form
view source
( ownerContext )
All of the below methods are old methods moved here from Container layout\nTODO: remove these methods once Form layout...

All of the below methods are old methods moved here from Container layout\nTODO: remove these methods once Form layout extends Auto layout

\n\n

Called before any calculation cycles to reset DOM values and prepare for calculation.

\n\n

This is a write phase and DOM reads should be strictly avoided when overridding\nthis method.

\n

Parameters

Overrides: Ext.layout.container.Container.beginLayoutCycle

...
\n

Parameters

Ext.layout.container.Form
view source
( ownerContext )abstract
Called to perform the calculations for this layout. ...

Called to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the done property is cleared\nbefore return to indicate that this layout is not yet done. The done property\nis always set to true before entering this method.

\n\n

This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to Ext.layout.ContextItem objects to\n be flushed at the next opportunity.

\n

Parameters

Overrides: Ext.layout.Layout.calculate

Ext.layout.container.Form
view source
( ownerContext, containerSize, dimensions )
Handles overflow processing for a container. ...

Handles overflow processing for a container. This should be called once the layout\nhas determined contentWidth/Height. In addition to the ownerContext passed to the\ncalculate method, this method also needs the containerSize (the object\nreturned by getContainerSize).

\n

Parameters

  • ownerContext : Ext.layout.ContextItem
    \n
  • containerSize : Object
    \n
  • dimensions : Number

    A bit mask for the overflow managed dimensions. The 0-bit\nis for width and the 1-bit is for height. In other words, a value of 1 would be\nonly width, 2 would be only height and 3 would be both.

    \n
( args ) : Objectdeprecatedprotected
Call the original method that was previously overridden with override\n\nExt.define('My.Cat', {\n constructor: functi...

Call the original method that was previously overridden with override

\n\n
Ext.define('My.Cat', {\n    constructor: function() {\n        alert(\"I'm a cat!\");\n    }\n});\n\nMy.Cat.override({\n    constructor: function() {\n        alert(\"I'm going to be a cat!\");\n\n        this.callOverridden();\n\n        alert(\"Meeeeoooowwww\");\n    }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n                          // alerts \"I'm a cat!\"\n                          // alerts \"Meeeeoooowwww\"\n
\n
\n

This method has been deprecated

\n

as of 4.1. Use callParent instead.

\n\n
\n

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object\nfrom the current method, for example: this.callOverridden(arguments)

    \n

Returns

  • Object

    Returns the result of calling the overridden method

    \n
Call the \"parent\" method of the current method. ...

Call the \"parent\" method of the current method. That is the method previously\noverridden by derivation or by an override (see Ext.define).

\n\n
 Ext.define('My.Base', {\n     constructor: function (x) {\n         this.x = x;\n     },\n\n     statics: {\n         method: function (x) {\n             return x;\n         }\n     }\n });\n\n Ext.define('My.Derived', {\n     extend: 'My.Base',\n\n     constructor: function () {\n         this.callParent([21]);\n     }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x);  // alerts 21\n
\n\n

This can be used with an override as follows:

\n\n
 Ext.define('My.DerivedOverride', {\n     override: 'My.Derived',\n\n     constructor: function (x) {\n         this.callParent([x*2]); // calls original My.Derived constructor\n     }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x);  // now alerts 42\n
\n\n

This also works with static methods.

\n\n
 Ext.define('My.Derived2', {\n     extend: 'My.Base',\n\n     statics: {\n         method: function (x) {\n             return this.callParent([x*2]); // calls My.Base.method\n         }\n     }\n });\n\n alert(My.Base.method(10);     // alerts 10\n alert(My.Derived2.method(10); // alerts 20\n
\n\n

Lastly, it also works with overridden static methods.

\n\n
 Ext.define('My.Derived2Override', {\n     override: 'My.Derived2',\n\n     statics: {\n         method: function (x) {\n             return this.callParent([x*2]); // calls My.Derived2.method\n         }\n     }\n });\n\n alert(My.Derived2.method(10); // now alerts 40\n
\n\n

To override a method and replace it and also call the superclass method, use\ncallSuper. This is often done to patch a method to fix a bug.

\n

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object\nfrom the current method, for example: this.callParent(arguments)

    \n

Returns

  • Object

    Returns the result of calling the parent method

    \n
This method is used by an override to call the superclass method but bypass any\noverridden method. ...

This method is used by an override to call the superclass method but bypass any\noverridden method. This is often done to \"patch\" a method that contains a bug\nbut for whatever reason cannot be fixed directly.

\n\n

Consider:

\n\n
 Ext.define('Ext.some.Class', {\n     method: function () {\n         console.log('Good');\n     }\n });\n\n Ext.define('Ext.some.DerivedClass', {\n     method: function () {\n         console.log('Bad');\n\n         // ... logic but with a bug ...\n\n         this.callParent();\n     }\n });\n
\n\n

To patch the bug in DerivedClass.method, the typical solution is to create an\noverride:

\n\n
 Ext.define('App.paches.DerivedClass', {\n     override: 'Ext.some.DerivedClass',\n\n     method: function () {\n         console.log('Fixed');\n\n         // ... logic but with bug fixed ...\n\n         this.callSuper();\n     }\n });\n
\n\n

The patch method cannot use callParent to call the superclass method since\nthat would call the overridden method containing the bug. In other words, the\nabove patch would only produce \"Fixed\" then \"Good\" in the console log, whereas,\nusing callParent would produce \"Fixed\" then \"Bad\" then \"Good\".

\n

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object\nfrom the current method, for example: this.callSuper(arguments)

    \n

Returns

  • Object

    Returns the result of calling the superclass method

    \n
Ext.layout.container.Form
view source
( ownerContext )
This method (if implemented) is called at the end of the cycle in which this layout\ncompletes (by not setting done to...

This method (if implemented) is called at the end of the cycle in which this layout\ncompletes (by not setting done to false in calculate). It is\npossible for the layout to complete and yet become invalid before the end of the cycle,\nin which case, this method will not be called. It is also possible for this method to\nbe called and then later the layout becomes invalidated. This will result in\ncalculate being called again, followed by another call to this method.

\n\n

This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to Ext.layout.ContextItem objects to\nbe flushed at the next opportunity.

\n\n

This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.

\n

Parameters

Overrides: Ext.layout.Layout.completeLayout

Adds layout's itemCls and owning Container's itemCls ...

Adds layout's itemCls and owning Container's itemCls

\n

Parameters

Overrides: Ext.layout.Layout.configureItem

...
\n

Parameters

...
\n

Parameters

...
\n

Parameters

Ext.layout.container.Form
view source
( out, renderData )
Creates an element that makes bottom/right body padding consistent across browsers. ...

Creates an element that makes bottom/right body padding consistent across browsers.\nThis element is sized based on the need for scrollbars in calculateOverflow.\nIf the manageOverflow option is false, this element is not created.

\n\n

See getScrollRangeFlags for more details.

\n

Parameters

This method (if implemented) is called after all layouts have completed. ...

This method (if implemented) is called after all layouts have completed. In most\nways this is similar to completeLayout. This call can cause this (or any\nlayout) to be become invalid (see Ext.layout.Context.invalidate), but this\nis best avoided. This method is intended to be where final reads are made and so it\nis best to avoid invalidating layouts at this point whenever possible. Even so, this\nmethod can be used to perform final checks that may require all other layouts to be\ncomplete and then invalidate some results.

\n\n

This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to Ext.layout.ContextItem objects to\nbe flushed at the next opportunity.

\n\n

This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.

\n

Parameters

...
\n

Parameters

This method is called after all layouts are complete and their calculations flushed\nto the DOM. ...

This method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches lastComponentSize.

\n\n

This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.

\n\n

This method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.

\n

Parameters

...
\n

Parameters

Ext.layout.container.Form
view source
( ownerContext, [inDom], [ignoreOverflow] ) : Objectprotected
Returns the container size (that of the target). ...

Returns the container size (that of the target). Only the fixed-sized dimensions can\nbe returned because the shrinkWrap dimensions are based on the contentWidth/Height\nas determined by the container layout.

\n\n

If the calculateOverflow method is used and if manageOverflow is\ntrue, this may adjust the width/height by the size of scrollbars.

\n

Parameters

  • ownerContext : Ext.layout.ContextItem

    The owner's context item.

    \n
  • inDom : Boolean (optional)

    True if the container size must be in the DOM.

    \n

    Defaults to: false

  • ignoreOverflow : Boolean (optional)

    if true scrollbar size will not be\nsubtracted from container size.

    \n

    Defaults to: true

Returns

Overrides: Ext.layout.container.Container.getContainerSize

Returns the element into which extra functional DOM elements can be inserted. ...

Returns the element into which extra functional DOM elements can be inserted. Defaults to the owner Component's encapsulating element.

\n\n

May be overridden in Component layout managers which implement a component render target which must only\ncontain child components.

\n

Returns

Returns the initial configuration passed to constructor when instantiating\nthis class. ...

Returns the initial configuration passed to constructor when instantiating\nthis class.

\n

Parameters

  • name : String (optional)

    Name of the config option to return.

    \n

Returns

  • Object/Mixed

    The full config object or a single config value\nwhen name parameter specified.

    \n
Ext.layout.container.Form
view source
( item ) : Ext.layout.SizePolicyprotected
Returns an object describing how this layout manages the size of the given component. ...

Returns an object describing how this layout manages the size of the given component.\nThis method must be implemented by any layout that manages components.

\n

Parameters

Returns

Overrides: Ext.layout.Layout.getItemSizePolicy

...

\n

Parameters

Returns an array of child components either for a render phase (Performed in the beforeLayout\nmethod of the layout's ...

Returns an array of child components either for a render phase (Performed in the beforeLayout\nmethod of the layout's base class), or the layout phase (onLayout).

\n

Returns

Overrides: Ext.layout.Layout.getLayoutItems

Ext.layout.container.Form
view source
( ownerContext ) : Stringprotected
returns the overflow-x style of the render target ...

returns the overflow-x style of the render target

\n

Parameters

Returns

Ext.layout.container.Form
view source
( ownerContext ) : Stringprotected
returns the overflow-y style of the render target ...

returns the overflow-y style of the render target

\n

Parameters

Returns

This method is used to offset the DOM position when checking\nwhether the element is a certain child of the target. ...

This method is used to offset the DOM position when checking\nwhether the element is a certain child of the target. This is\nrequired in cases where the extra elements prepended to the target\nbefore any of the items. An example of this is when using labelAlign: 'top'\non a field. The label appears first in the DOM before any child items are\ncreated, so when we check the position we need to add an extra offset.\nContainers that create an innerCt are exempt because this new element\npreserves the order

\n

Parameters

Overrides: Ext.layout.Layout.getPositionOffset

Ext.layout.container.Form
view source
( )private
Ext.layout.container.Form
view source
( ) : Ext.Element
Returns the element into which rendering must take place. ...

Returns the element into which rendering must take place. Defaults to the owner Container's\ntarget element.

\n\n

May be overridden in layout managers which implement an inner element.

\n

Returns

Overrides: Ext.layout.container.Container.getRenderTarget

Ext.layout.container.Form
view source
( )private
Returns all items that are rendered ...

Returns all items that are rendered

\n

Returns

  • Array

    All matching items

    \n
( width, height, contentWidth, contentHeight )private
...
\n

Parameters

Returns the owner component's resize element. ...

Returns the owner component's resize element.

\n

Returns

Returns all items that are both rendered and visible ...

Returns all items that are both rendered and visible

\n

Returns

  • Array

    All matching items

    \n
...
\n

Parameters

( config ) : Ext.Basechainableprotected
Initialize configuration for this class. ...

Initialize configuration for this class. a typical example:

\n\n
Ext.define('My.awesome.Class', {\n    // The default config\n    config: {\n        name: 'Awesome',\n        isAwesome: true\n    },\n\n    constructor: function(config) {\n        this.initConfig(config);\n    }\n});\n\nvar awesome = new My.awesome.Class({\n    name: 'Super Awesome'\n});\n\nalert(awesome.getName()); // 'Super Awesome'\n
\n

Parameters

Returns

Ext.layout.container.Form
view source
( )protected
A one-time initialization method called just before rendering. ...

A one-time initialization method called just before rendering.

\n

Overrides: Ext.layout.Layout.initLayout

...
\n

Parameters

...
\n

Parameters

Ext.layout.container.Form
view source
( item )private
...
\n

Parameters

Overrides: Ext.layout.Layout.isItemShrinkWrap

Ext.layout.container.Form
view source
( item, target, position )protected
Validates item is in the proper place in the dom. ...

Validates item is in the proper place in the dom.

\n

Parameters

Overrides: Ext.layout.Layout.isValidParent

( item, target, position )private
Moves Component to the provided target instead. ...

Moves Component to the provided target instead.

\n

Parameters

Called for every layout in the layout context after all the layouts have been finally flushed ...

Called for every layout in the layout context after all the layouts have been finally flushed

\n

Overrides: Ext.layout.Layout.notifyOwner

...
\n

Parameters

( names, callback, scope )private
...
\n

Parameters

This method is called when a child item changes in some way. ...

This method is called when a child item changes in some way. By default this calls\nExt.AbstractComponent.updateLayout on this layout's owner.

\n

Parameters

Returns

  • Boolean

    True if this layout has handled the content change.

    \n
...
\n

Parameters

Removes items in the childEls array based on the return value of a supplied test\nfunction. ...

Removes items in the childEls array based on the return value of a supplied test\nfunction. The function is called with a entry in childEls and if the test function\nreturn true, that entry is removed. If false, that entry is kept.

\n

Parameters

( item, target, position )private
Renders the given Component into the target Element. ...

Renders the given Component into the target Element.

\n

Parameters

( items, target )protected
Iterates over all passed items, ensuring they are rendered. ...

Iterates over all passed items, ensuring they are rendered. If the items are already rendered,\nalso determines if the items are in the proper place in the dom.

\n

Parameters

( config, applyIfNotSet ) : Ext.Basechainableprivate
...
\n

Parameters

Returns

Sets the layout owner ...

Sets the layout owner

\n

Parameters

Ext.layout.container.Form
view source
( renderTpl )private
...
\n

Parameters

Overrides: Ext.layout.container.Container.setupRenderTpl

...
\n

Parameters

Get the reference to the class from which this object was instantiated. ...

Get the reference to the class from which this object was instantiated. Note that unlike self,\nthis.statics() is scope-independent and it always returns the class from which it was called, regardless of what\nthis points to during run-time

\n\n
Ext.define('My.Cat', {\n    statics: {\n        totalCreated: 0,\n        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n    },\n\n    constructor: function() {\n        var statics = this.statics();\n\n        alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to\n                                        // equivalent to: My.Cat.speciesName\n\n        alert(this.self.speciesName);   // dependent on 'this'\n\n        statics.totalCreated++;\n    },\n\n    clone: function() {\n        var cloned = new this.self;                      // dependent on 'this'\n\n        cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName\n\n        return cloned;\n    }\n});\n\n\nExt.define('My.SnowLeopard', {\n    extend: 'My.Cat',\n\n    statics: {\n        speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'\n    },\n\n    constructor: function() {\n        this.callParent();\n    }\n});\n\nvar cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'\n\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'\nalert(clone.groupName);                 // alerts 'Cat'\n\nalert(My.Cat.totalCreated);             // alerts 3\n
\n

Returns

Ext.layout.container.Form
view source
( item )private
...
\n

Parameters

Defined By

Static Methods

( config )privatestatic
...
\n

Parameters

( members )chainableprivatestatic
...
\n

Parameters

( name, member )chainableprivatestatic
...
\n

Parameters

( members )chainablestatic
Add methods / properties to the prototype of this class. ...

Add methods / properties to the prototype of this class.

\n\n
Ext.define('My.awesome.Cat', {\n    constructor: function() {\n        ...\n    }\n});\n\n My.awesome.Cat.addMembers({\n     meow: function() {\n        alert('Meowww...');\n     }\n });\n\n var kitty = new My.awesome.Cat;\n kitty.meow();\n
\n

Parameters

( members ) : Ext.Basechainablestatic
Add / override static properties of this class. ...

Add / override static properties of this class.

\n\n
Ext.define('My.cool.Class', {\n    ...\n});\n\nMy.cool.Class.addStatics({\n    someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'\n    method1: function() { ... },    // My.cool.Class.method1 = function() { ... };\n    method2: function() { ... }     // My.cool.Class.method2 = function() { ... };\n});\n
\n

Parameters

Returns

( xtype )chainableprivatestatic
...
\n

Parameters

( fromClass, members ) : Ext.Basechainableprivatestatic
Borrow another class' members to the prototype of this class. ...

Borrow another class' members to the prototype of this class.

\n\n
Ext.define('Bank', {\n    money: '$$$',\n    printMoney: function() {\n        alert('$$$$$$$');\n    }\n});\n\nExt.define('Thief', {\n    ...\n});\n\nThief.borrow(Bank, ['money', 'printMoney']);\n\nvar steve = new Thief();\n\nalert(steve.money); // alerts '$$$'\nsteve.printMoney(); // alerts '$$$$$$$'\n
\n

Parameters

  • fromClass : Ext.Base

    The class to borrow members from

    \n
  • members : Array/String

    The names of the members to borrow

    \n

Returns

Create a new instance of this Class. ...

Create a new instance of this Class.

\n\n
Ext.define('My.cool.Class', {\n    ...\n});\n\nMy.cool.Class.create({\n    someConfig: true\n});\n
\n\n

All parameters are passed to the constructor of the class.

\n

Returns

( alias, origin )static
Create aliases for existing prototype methods. ...

Create aliases for existing prototype methods. Example:

\n\n
Ext.define('My.cool.Class', {\n    method1: function() { ... },\n    method2: function() { ... }\n});\n\nvar test = new My.cool.Class();\n\nMy.cool.Class.createAlias({\n    method3: 'method1',\n    method4: 'method2'\n});\n\ntest.method3(); // test.method1()\n\nMy.cool.Class.createAlias('method5', 'method3');\n\ntest.method5(); // test.method3() -> test.method1()\n
\n

Parameters

( config )privatestatic
...
\n

Parameters

Get the current class' name in string format. ...

Get the current class' name in string format.

\n\n
Ext.define('My.cool.Class', {\n    constructor: function() {\n        alert(this.self.getName()); // alerts 'My.cool.Class'\n    }\n});\n\nMy.cool.Class.getName(); // 'My.cool.Class'\n
\n

Returns

( )deprecatedstatic
Adds members to class. ...

Adds members to class.

\n
\n

This method has been deprecated since 4.1

\n

Use addMembers instead.

\n\n
\n
( name, mixinClass )privatestatic
Used internally by the mixins pre-processor ...

Used internally by the mixins pre-processor

\n

Parameters

( fn, scope )chainableprivatestatic
...
\n

Parameters

( members ) : Ext.Basechainabledeprecatedstatic
Override members of this class. ...

Override members of this class. Overridden methods can be invoked via\ncallParent.

\n\n
Ext.define('My.Cat', {\n    constructor: function() {\n        alert(\"I'm a cat!\");\n    }\n});\n\nMy.Cat.override({\n    constructor: function() {\n        alert(\"I'm going to be a cat!\");\n\n        this.callParent(arguments);\n\n        alert(\"Meeeeoooowwww\");\n    }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n                          // alerts \"I'm a cat!\"\n                          // alerts \"Meeeeoooowwww\"\n
\n\n

As of 4.1, direct use of this method is deprecated. Use Ext.define\ninstead:

\n\n
Ext.define('My.CatOverride', {\n    override: 'My.Cat',\n    constructor: function() {\n        alert(\"I'm going to be a cat!\");\n\n        this.callParent(arguments);\n\n        alert(\"Meeeeoooowwww\");\n    }\n});\n
\n\n

The above accomplishes the same result but can be managed by the Ext.Loader\nwhich can properly order the override and its target class and the build process\ncan determine whether the override is needed based on the required state of the\ntarget class (My.Cat).

\n
\n

This method has been deprecated since 4.1.0

\n

Use Ext.define instead

\n\n
\n

Parameters

  • members : Object

    The properties to add to this class. This should be\nspecified as an object literal containing one or more properties.

    \n

Returns

","superclasses":["Ext.Base","Ext.layout.Layout","Ext.layout.container.Container"],"meta":{},"code_type":"ext_define","requires":[],"html_meta":{},"statics":{"property":[{"tagname":"property","owner":"Ext.Base","meta":{"static":true,"private":true},"name":"$onExtended","id":"static-property-S-onExtended"}],"cfg":[],"css_var":[],"method":[{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"private":true},"name":"addConfig","id":"static-method-addConfig"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true,"private":true},"name":"addInheritableStatics","id":"static-method-addInheritableStatics"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true,"private":true},"name":"addMember","id":"static-method-addMember"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true},"name":"addMembers","id":"static-method-addMembers"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true},"name":"addStatics","id":"static-method-addStatics"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true,"private":true},"name":"addXtype","id":"static-method-addXtype"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true,"private":true},"name":"borrow","id":"static-method-borrow"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true},"name":"create","id":"static-method-create"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true},"name":"createAlias","id":"static-method-createAlias"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"private":true},"name":"extend","id":"static-method-extend"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true},"name":"getName","id":"static-method-getName"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"deprecated":{"text":"Use {@link #addMembers} instead.","version":"4.1"}},"name":"implement","id":"static-method-implement"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"private":true},"name":"mixin","id":"static-method-mixin"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true,"private":true},"name":"onExtended","id":"static-method-onExtended"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true,"markdown":true,"deprecated":{"text":"Use {@link Ext#define Ext.define} instead","version":"4.1.0"}},"name":"override","id":"static-method-override"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"private":true},"name":"triggerExtended","id":"static-method-triggerExtended"}],"event":[],"css_mixin":[]},"files":[{"href":"Form.html#Ext-layout-container-Form","filename":"Form.js"}],"linenr":1,"members":{"property":[{"tagname":"property","owner":"Ext.Base","meta":{"private":true},"name":"$className","id":"property-S-className"},{"tagname":"property","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"animatePolicy","id":"property-animatePolicy"},{"tagname":"property","owner":"Ext.layout.Layout","meta":{"private":true},"name":"autoSizePolicy","id":"property-autoSizePolicy"},{"tagname":"property","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"childEls","id":"property-childEls"},{"tagname":"property","owner":"Ext.Base","meta":{"private":true},"name":"configMap","id":"property-configMap"},{"tagname":"property","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"createsInnerCt","id":"property-createsInnerCt"},{"tagname":"property","owner":"Ext.layout.Layout","meta":{},"name":"done","id":"property-done"},{"tagname":"property","owner":"Ext.layout.container.Form","meta":{},"name":"getScrollRangeFlags","id":"property-getScrollRangeFlags"},{"tagname":"property","owner":"Ext.Base","meta":{"private":true},"name":"initConfigList","id":"property-initConfigList"},{"tagname":"property","owner":"Ext.Base","meta":{"private":true},"name":"initConfigMap","id":"property-initConfigMap"},{"tagname":"property","owner":"Ext.layout.Layout","meta":{"private":true},"name":"initialized","id":"property-initialized"},{"tagname":"property","owner":"Ext.Base","meta":{"private":true},"name":"isInstance","id":"property-isInstance"},{"tagname":"property","owner":"Ext.layout.Layout","meta":{"readonly":true},"name":"isLayout","id":"property-isLayout"},{"tagname":"property","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"lastOverflowAdjust","id":"property-lastOverflowAdjust"},{"tagname":"property","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"manageOverflow","id":"property-manageOverflow"},{"tagname":"property","owner":"Ext.layout.container.Container","meta":{},"name":"overflowPadderEl","id":"property-overflowPadderEl"},{"tagname":"property","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"padRow","id":"property-padRow"},{"tagname":"property","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"renderTpl","id":"property-renderTpl"},{"tagname":"property","owner":"Ext.layout.Layout","meta":{"private":true},"name":"running","id":"property-running"},{"tagname":"property","owner":"Ext.Base","meta":{"protected":true},"name":"self","id":"property-self"},{"tagname":"property","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"tableCls","id":"property-tableCls"},{"tagname":"property","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"type","id":"property-type"},{"tagname":"property","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"usesContainerHeight","id":"property-usesContainerHeight"},{"tagname":"property","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"usesContainerWidth","id":"property-usesContainerWidth"},{"tagname":"property","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"usesHeight","id":"property-usesHeight"},{"tagname":"property","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"usesWidth","id":"property-usesWidth"}],"cfg":[{"tagname":"cfg","owner":"Ext.layout.container.Container","meta":{},"name":"itemCls","id":"cfg-itemCls"}],"css_var":[],"method":[{"tagname":"method","owner":"Ext.layout.container.Container","meta":{},"name":"constructor","id":"method-constructor"},{"tagname":"method","owner":"Ext.util.ElementContainer","meta":{},"name":"addChildEls","id":"method-addChildEls"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"protected":true},"name":"afterRemove","id":"method-afterRemove"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"afterRenderItem","id":"method-afterRenderItem"},{"tagname":"method","owner":"Ext.util.ElementContainer","meta":{"private":true},"name":"applyChildEls","id":"method-applyChildEls"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"beginCollapse","id":"method-beginCollapse"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"beginExpand","id":"method-beginExpand"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{},"name":"beginLayout","id":"method-beginLayout"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{},"name":"beginLayoutCycle","id":"method-beginLayoutCycle"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"cacheChildItems","id":"method-cacheChildItems"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"cacheElements","id":"method-cacheElements"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{"abstract":true},"name":"calculate","id":"method-calculate"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{},"name":"calculateOverflow","id":"method-calculateOverflow"},{"tagname":"method","owner":"Ext.Base","meta":{"protected":true,"deprecated":{"text":"as of 4.1. Use {@link #callParent} instead."}},"name":"callOverridden","id":"method-callOverridden"},{"tagname":"method","owner":"Ext.Base","meta":{"protected":true},"name":"callParent","id":"method-callParent"},{"tagname":"method","owner":"Ext.Base","meta":{"protected":true},"name":"callSuper","id":"method-callSuper"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{},"name":"completeLayout","id":"method-completeLayout"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"configClass","id":"method-configClass"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"protected":true},"name":"configureItem","id":"method-configureItem"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"destroy","id":"method-destroy"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"doRenderBody","id":"method-doRenderBody"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"doRenderContainer","id":"method-doRenderContainer"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"doRenderItems","id":"method-doRenderItems"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{},"name":"doRenderPadder","id":"method-doRenderPadder"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{},"name":"finalizeLayout","id":"method-finalizeLayout"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"finishRender","id":"method-finishRender"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"finishRenderItems","id":"method-finishRenderItems"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{},"name":"finishedLayout","id":"method-finishedLayout"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"getAnimatePolicy","id":"method-getAnimatePolicy"},{"tagname":"method","owner":"Ext.util.ElementContainer","meta":{"private":true},"name":"getChildEls","id":"method-getChildEls"},{"tagname":"method","owner":"Ext.util.ElementContainer","meta":{"private":true},"name":"getClassChildEls","id":"method-getClassChildEls"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"getConfig","id":"method-getConfig"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{"protected":true},"name":"getContainerSize","id":"method-getContainerSize"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"getContentTarget","id":"method-getContentTarget"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{},"name":"getElementTarget","id":"method-getElementTarget"},{"tagname":"method","owner":"Ext.Base","meta":{},"name":"getInitialConfig","id":"method-getInitialConfig"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{"protected":true},"name":"getItemSizePolicy","id":"method-getItemSizePolicy"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"getItemsRenderTree","id":"method-getItemsRenderTree"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{},"name":"getLayoutItems","id":"method-getLayoutItems"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{"protected":true},"name":"getOverflowXStyle","id":"method-getOverflowXStyle"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{"protected":true},"name":"getOverflowYStyle","id":"method-getOverflowYStyle"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"getPositionOffset","id":"method-getPositionOffset"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"getRenderData","id":"method-getRenderData"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{},"name":"getRenderTarget","id":"method-getRenderTarget"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"getRenderTpl","id":"method-getRenderTpl"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"getRenderTree","id":"method-getRenderTree"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"protected":true},"name":"getRenderedItems","id":"method-getRenderedItems"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"getScrollbarsNeeded","id":"method-getScrollbarsNeeded"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{},"name":"getTarget","id":"method-getTarget"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"protected":true},"name":"getVisibleItems","id":"method-getVisibleItems"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"hasConfig","id":"method-hasConfig"},{"tagname":"method","owner":"Ext.Base","meta":{"chainable":true,"protected":true},"name":"initConfig","id":"method-initConfig"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{"protected":true},"name":"initLayout","id":"method-initLayout"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"isItemBoxParent","id":"method-isItemBoxParent"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"isItemLayoutRoot","id":"method-isItemLayoutRoot"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"isItemShrinkWrap","id":"method-isItemShrinkWrap"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"isRunning","id":"method-isRunning"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{"protected":true},"name":"isValidParent","id":"method-isValidParent"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"moveItem","id":"method-moveItem"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"notifyOwner","id":"method-notifyOwner"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"onAdd","id":"method-onAdd"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"onConfigUpdate","id":"method-onConfigUpdate"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{},"name":"onContentChange","id":"method-onContentChange"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"onDestroy","id":"method-onDestroy"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"onRemove","id":"method-onRemove"},{"tagname":"method","owner":"Ext.util.ElementContainer","meta":{"private":true},"name":"prune","id":"method-prune"},{"tagname":"method","owner":"Ext.util.ElementContainer","meta":{},"name":"removeChildEls","id":"method-removeChildEls"},{"tagname":"method","owner":"Ext.layout.container.Container","meta":{"private":true},"name":"renderChildren","id":"method-renderChildren"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"renderItem","id":"method-renderItem"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"protected":true},"name":"renderItems","id":"method-renderItems"},{"tagname":"method","owner":"Ext.Base","meta":{"chainable":true,"private":true},"name":"setConfig","id":"method-setConfig"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"setOwner","id":"method-setOwner"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"setupRenderTpl","id":"method-setupRenderTpl"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"sortWeightedItems","id":"method-sortWeightedItems"},{"tagname":"method","owner":"Ext.Base","meta":{"protected":true},"name":"statics","id":"method-statics"},{"tagname":"method","owner":"Ext.layout.container.Form","meta":{"private":true},"name":"transformItemRenderTree","id":"method-transformItemRenderTree"},{"tagname":"method","owner":"Ext.layout.Layout","meta":{"private":true},"name":"undoLayout","id":"method-undoLayout"}],"event":[],"css_mixin":[]},"inheritable":null,"private":null,"component":false,"name":"Ext.layout.container.Form","singleton":false,"override":null,"inheritdoc":null,"id":"class-Ext.layout.container.Form","mixins":[],"mixedInto":[]});