Ext.data.JsonP.Ext_layout_Context({"alternateClassNames":[],"aliases":{},"enum":null,"parentMixins":[],"tagname":"class","subclasses":[],"extends":"Ext.Base","uses":[],"html":"

Hierarchy

Ext.Base
Ext.layout.Context

Requires

Files

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Manages context information during a layout.

\n\n

Algorithm

\n\n

This class performs the following jobs:

\n\n\n\n\n

Work done during layout falls into either a \"read phase\" or a \"write phase\" and it is\nessential to always be aware of the current phase. Most methods in\nLayout are called during a read phase:\ncalculate,\ncompleteLayout and\nfinalizeLayout. The exceptions to this are\nbeginLayout,\nbeginLayoutCycle and\nfinishedLayout which are called during\na write phase. While finishedLayout is called\na write phase, it is really intended to be a catch-all for post-processing after a\nlayout run.

\n\n

In a read phase, it is OK to read the DOM but this should be done using the appropriate\nContextItem where possible since that provides a cache\nto avoid redundant reads. No writes should be made to the DOM in a read phase! Instead,\nthe values should be written to the proper ContextItem for later write-back.

\n\n

The rules flip-flop in a write phase. The only difference is that ContextItem methods\nlike getStyle will still read the DOM unless the\nvalue was previously read. This detail is unknowable from the outside of ContextItem, so\nread calls to ContextItem should also be avoided in a write phase.

\n\n

Calculating interdependent layouts requires a certain amount of iteration. In a given\ncycle, some layouts will contribute results that allow other layouts to proceed. The\ngeneral flow then is to gather all of the layouts (both component and container) in a\ncomponent tree and queue them all for processing. The initial queue order is bottom-up\nand component layout first, then container layout (if applicable) for each component.

\n\n

This initial step also calls the beginLayout method on all layouts to clear any values\nfrom the DOM that might interfere with calculations and measurements. In other words,\nthis is a \"write phase\" and reads from the DOM should be strictly avoided.

\n\n

Next the layout enters into its iterations or \"cycles\". Each cycle consists of calling\nthe calculate method on all layouts in the\nlayoutQueue. These calls are part of a \"read phase\" and writes to the DOM should\nbe strictly avoided.

\n\n

Considerations

\n\n

RULE 1: Respect the read/write cycles. Always use the getProp\nor getDomProp methods to get calculated values;\nonly use the getStyle method to read styles; use\nsetProp to set DOM values. Some reads will, of\ncourse, still go directly to the DOM, but if there is a method in\nContextItem to do a certain job, it should be used instead\nof a lower-level equivalent.

\n\n

The basic logic flow in calculate consists of gathering\nvalues by calling getProp or\ngetDomProp, calculating results and publishing\nthem by calling setProp. It is important to realize\nthat getProp will return undefined if the value\nis not yet known. But the act of calling the method is enough to track the fact that the\ncalling layout depends (in some way) on this value. In other words, the calling layout is\n\"triggered\" by the properties it requests.

\n\n

RULE 2: Avoid calling getProp unless the value\nis needed. Gratuitous calls cause inefficiency because the layout will appear to depend on\nvalues that it never actually uses. This applies equally to\ngetDomProp and the test-only methods\nhasProp and hasDomProp.

\n\n

Because getProp can return undefined, it is often\nthe case that subsequent math will produce NaN's. This is usually not a problem as the\nNaN's simply propagate along and result in final results that are NaN. Both undefined\nand NaN are ignored by Ext.layout.ContextItem.setProp, so it is often not necessary\nto even know that this is happening. It does become important for determining if a layout\nis not done or if it might lead to publishing an incorrect (but not NaN or undefined)\nvalue.

\n\n

RULE 3: If a layout has not calculated all the values it is required to calculate, it\nmust set done to false before returning from\ncalculate. This value is always true on entry because\nit is simpler to detect the incomplete state rather than the complete state (especially up\nand down a class hierarchy).

\n\n

RULE 4: A layout must never publish an incomplete (wrong) result. Doing so would cause\ndependent layouts to run their calculations on those wrong values, producing more wrong\nvalues and some layouts may even incorrectly flag themselves as done\nbefore the correct values are determined and republished. Doing this will poison the\ncalculations.

\n\n

RULE 5: Each value should only be published by one layout. If multiple layouts attempt\nto publish the same values, it would be nearly impossible to avoid breaking RULE 4. To\nhelp detect this problem, the layout diagnostics will trap on an attempt to set a value\nfrom different layouts.

\n\n

Complex layouts can produce many results as part of their calculations. These values are\nimportant for other layouts to proceed and need to be published by the earliest possible\ncall to Ext.layout.Layout.calculate to avoid unnecessary cycles and poor performance. It is\nalso possible, however, for some results to be related in a way such that publishing them\nmay be an all-or-none proposition (typically to avoid breaking RULE 4).

\n\n

RULE 6: Publish results as soon as they are known to be correct rather than wait for\nall values to be calculated. Waiting for everything to be complete can lead to deadlock.\nThe key here is not to forget RULE 4 in the process.

\n\n

Some layouts depend on certain critical values as part of their calculations. For example,\nHBox depends on width and cannot do anything until the width is known. In these cases, it\nis best to use block or\ndomBlock and thereby avoid processing the layout\nuntil the needed value is available.

\n\n

RULE 7: Use block or\ndomBlock when values are required to make progress.\nThis will mimize wasted recalculations.

\n\n

RULE 8: Blocks should only be used when no forward progress can be made. If even one\nvalue could still be calculated, a block could result in a deadlock.

\n\n

Historically, layouts have been invoked directly by component code, sometimes in places\nlike an afterLayout method for a child component. With the flexibility now available\nto solve complex, iterative issues, such things should be done in a responsible layout\n(be it component or container).

\n\n

RULE 9: Use layouts to solve layout issues and don't wait for the layout to finish to\nperform further layouts. This is especially important now that layouts process entire\ncomponent trees and not each layout in isolation.

\n\n

Sequence Diagram

\n\n

The simplest sequence diagram for a layout run looks roughly like this:

\n\n
  Context         Layout 1     Item 1     Layout 2     Item 2\n     |               |           |           |           |\n---->X-------------->X           |           |           |\nrun  X---------------|-----------|---------->X           |\n     X beginLayout   |           |           |           |\n     X               |           |           |           |\n   A X-------------->X           |           |           |\n     X  calculate    X---------->X           |           |\n     X             C X  getProp  |           |           |\n   B X               X---------->X           |           |\n     X               |  setProp  |           |           |\n     X               |           |           |           |\n   D X---------------|-----------|---------->X           |\n     X  calculate    |           |           X---------->X\n     X               |           |           |  setProp  |\n   E X               |           |           |           |\n     X---------------|-----------|---------->X           |\n     X completeLayout|           |         F |           |\n     X               |           |           |           |\n   G X               |           |           |           |\n   H X-------------->X           |           |           |\n     X  calculate    X---------->X           |           |\n     X             I X  getProp  |           |           |\n     X               X---------->X           |           |\n     X               |  setProp  |           |           |\n   J X-------------->X           |           |           |\n     X completeLayout|           |           |           |\n     X               |           |           |           |\n   K X-------------->X           |           |           |\n     X---------------|-----------|---------->X           |\n     X finalizeLayout|           |           |           |\n     X               |           |           |           |\n   L X-------------->X           |           |           |\n     X---------------|-----------|---------->X           |\n     X finishedLayout|           |           |           |\n     X               |           |           |           |\n   M X-------------->X           |           |           |\n     X---------------|-----------|---------->X           |\n     X notifyOwner   |           |           |           |\n   N |               |           |           |           |\n     -               -           -           -           -\n
\n\n

Notes:

\n\n

A. This is a call from the run method to the runCycle method.\nEach layout in the queue will have its calculate\nmethod called.

\n\n

B. After each calculate method is called the\ndone flag is checked to see if the Layout has completed.\nIf it has completed and that layout object implements a\ncompleteLayout method, this layout is queued to\nreceive its call. Otherwise, the layout will be queued again unless there are blocks or\ntriggers that govern its requeueing.

\n\n

C. The call to getProp is made to the Item\nand that will be tracked as a trigger (keyed by the name of the property being requested).\nChanges to this property will cause this layout to be requeued. The call to\nsetProp will place a value in the item and not\ndirectly into the DOM.

\n\n

D. Call the other layouts now in the first cycle (repeat B and C for each\nlayout).

\n\n

E. After completing a cycle, if progress was made (new properties were written to\nthe context) and if the layoutQueue is not empty, the next cycle is run. If no\nprogress was made or no layouts are ready to run, all buffered values are written to\nthe DOM (a flush).

\n\n

F. After flushing, any layouts that were marked as done\nthat also have a completeLayout method are called.\nThis can cause them to become no longer done (see invalidate). As with\ncalculate, this is considered a \"read phase\" and\ndirect DOM writes should be avoided.

\n\n

G. Flushing and calling any pending completeLayout\nmethods will likely trigger layouts that called getDomProp\nand unblock layouts that have called domBlock.\nThese variants are used when a layout needs the value to be correct in the DOM and not\nsimply known. If this does not cause at least one layout to enter the queue, we have a\nlayout FAILURE. Otherwise, we continue with the next cycle.

\n\n

H. Call calculate on any layouts in the queue\nat the start of this cycle. Just a repeat of B through G.

\n\n

I. Once the layout has calculated all that it is resposible for, it can leave itself\nin the done state. This is the value on entry to\ncalculate and must be cleared in that call if the\nlayout has more work to do.

\n\n

J. Now that all layouts are done, flush any DOM values and\ncompleteLayout calls. This can again cause\nlayouts to become not done, and so we will be back on another cycle if that happens.

\n\n

K. After all layouts are done, call the finalizeLayout\nmethod on any layouts that have one. As with completeLayout,\nthis can cause layouts to become no longer done. This is less desirable than using\ncompleteLayout because it will cause all\nfinalizeLayout methods to be called again\nwhen we think things are all wrapped up.

\n\n

L. After finishing the last iteration, layouts that have a\nfinishedLayout method will be called. This\ncall will only happen once per run and cannot cause layouts to be run further.

\n\n

M. After calling finahedLayout, layouts that have a\nnotifyOwner method will be called. This\ncall will only happen once per run and cannot cause layouts to be run further.

\n\n

N. One last flush to make sure everything has been written to the DOM.

\n\n

Inter-Layout Collaboration

\n\n

Many layout problems require collaboration between multiple layouts. In some cases, this\nis as simple as a component's container layout providing results used by its component\nlayout or vise-versa. A slightly more distant collaboration occurs in a box layout when\nstretchmax is used: the child item's component layout provides results that are consumed\nby the ownerCt's box layout to determine the size of the children.

\n\n

The various forms of interdependence between a container and its children are described by\neach components' size model.

\n\n

To facilitate this collaboration, the following pairs of properties are published to the\ncomponent's ContextItem:

\n\n\n\n

Properties

Defined By

Instance Properties

...
\n

Defaults to: 'Ext.Base'

...
\n

Defaults to: {}

...
\n

Defaults to: []

...
\n

Defaults to: {}

...
\n

Defaults to: true

List of layouts to perform.

\n

List of layouts to perform.

\n
Ext.layout.Context
view source
: Objectprivate
Defined in override Ext.diag.layout.Context. ...

Defined in override Ext.diag.layout.Context.

\n

Defaults to: {0: 0}

Ext.layout.Context
view source
: Numberprivate
...
\n

Defaults to: 0

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.Context
view source
: Number
One of these values:\n\n\n0 - Before run\n1 - Running\n2 - Run complete ...

One of these values:

\n\n
    \n
  • 0 - Before run
  • \n
  • 1 - Running
  • \n
  • 2 - Run complete
  • \n
\n\n

Defaults to: 0

Defined By

Static Properties

...
\n

Defaults to: []

Methods

Defined By

Instance Methods

Ext.layout.Context
view source
new( config ) : Ext.layout.Context
...
\n

Parameters

Returns

Ext.layout.Context
view source
( layout, methodName )private
Overridden in Ext.diag.layout.Context. ...

Overridden in Ext.diag.layout.Context.

\n

Parameters

( 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.Context
view source
( comp, isChild, isDestroying )private
From override Ext.diag.layout.Context: reportOnSuccess: true, ...

From override Ext.diag.layout.Context: reportOnSuccess: true,

\n

Parameters

Ext.layout.Context
view source
( layout )private
Overridden in Ext.diag.layout.Context. ...

Overridden in Ext.diag.layout.Context.

\n

Parameters

Ext.layout.Context
view source
( oldOptions, newOptions, funcName )private
...
\n

Parameters

Ext.layout.Context
view source
( )private
Defined in override Ext.diag.layout.Context. ...

Defined in override Ext.diag.layout.Context.

\n
Ext.layout.Context
view source
( layout, inDom )private
...
\n

Parameters

Ext.layout.Context
view source
( )
Flushes any pending writes to the DOM by calling each ContextItem in the flushQueue. ...

Flushes any pending writes to the DOM by calling each ContextItem in the flushQueue.

\n\n

Overridden in Ext.diag.layout.Context.

\n
Ext.layout.Context
view source
( )private
...
\n
Ext.layout.Context
view source
( )private
Overridden in Ext.diag.layout.Context. ...

Overridden in Ext.diag.layout.Context.

\n
Ext.layout.Context
view source
( queueName, methodName, dontClear )private
...
\n

Parameters

Ext.layout.Context
view source
( cmp )
Returns the ContextItem for a component. ...

Returns the ContextItem for a component.

\n\n

Overridden in Ext.diag.layout.Context.

\n

Parameters

...
\n

Parameters

Ext.layout.Context
view source
( parent, el )
Returns the ContextItem for an element. ...

Returns the ContextItem for an element.

\n\n

Overridden in Ext.diag.layout.Context.

\n

Parameters

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.Context
view source
( target, el )private
...
\n

Parameters

Ext.layout.Context
view source
( layout )private
Defined in override Ext.diag.layout.Context. ...

Defined in override Ext.diag.layout.Context.

\n

Parameters

Ext.layout.Context
view source
( )private
...
\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.Context
view source
( components, full )
Invalidates one or more components' layouts (component and container). ...

Invalidates one or more components' layouts (component and container). This can be\ncalled before run to identify the components that need layout or during the run to\nrestart the layout of a component. This is called internally to flush any queued\ninvalidations at the start of a cycle. If called during a run, it is not expected\nthat new components will be introduced to the layout.

\n

Parameters

  • components : Ext.Component/Array

    An array of Components or a single Component.

    \n
  • full : Boolean

    True if all properties should be invalidated, otherwise only\n those calculated by the component should be invalidated.

    \n
Ext.layout.Context
view source
( layout )private
Overridden in Ext.diag.layout.Context. ...

Overridden in Ext.diag.layout.Context.

\n

Parameters

Ext.layout.Context
view source
( layout, reported )private
Defined in override Ext.diag.layout.Context. ...

Defined in override Ext.diag.layout.Context.

\n

Parameters

Ext.layout.Context
view source
( )private
...
\n
( names, callback, scope )private
...
\n

Parameters

Ext.layout.Context
view source
( options, item, name )private
...
\n

Parameters

Ext.layout.Context
view source
( item )private
Queues a ContextItem to have its Ext.layout.ContextItem.flushAnimations method called. ...

Queues a ContextItem to have its Ext.layout.ContextItem.flushAnimations method called.

\n

Parameters

Ext.layout.Context
view source
( layout )private
Queues a layout to have its Ext.layout.Layout.completeLayout method called. ...

Queues a layout to have its Ext.layout.Layout.completeLayout method called.

\n

Parameters

Ext.layout.Context
view source
( layout )private
Queues a layout to have its Ext.layout.Layout.finalizeLayout method called. ...

Queues a layout to have its Ext.layout.Layout.finalizeLayout method called.

\n

Parameters

Ext.layout.Context
view source
( item )private
Queues a ContextItem for the next flush to the DOM. ...

Queues a ContextItem for the next flush to the DOM. This should only be called by\nthe Ext.layout.ContextItem class.

\n

Parameters

Ext.layout.Context
view source
( item, options )private
Queue a component (and its tree) to be invalidated on the next cycle. ...

Queue a component (and its tree) to be invalidated on the next cycle.

\n

Parameters

Ext.layout.Context
view source
( item )private
...
\n

Parameters

Ext.layout.Context
view source
( layout )private
Queues a layout for the next calculation cycle. ...

Queues a layout for the next calculation cycle. This should not be called if the\nlayout is done, blocked or already in the queue. The only classes that should call\nthis method are this class and Ext.layout.ContextItem.

\n\n

Overridden in Ext.diag.layout.Context.

\n

Parameters

Ext.layout.Context
view source
( parent, el )
Removes the ContextItem for an element from the cache and from the parent's\n\"children\" array. ...

Removes the ContextItem for an element from the cache and from the parent's\n\"children\" array.

\n

Parameters

Ext.layout.Context
view source
( layout, reported )private
Defined in override Ext.diag.layout.Context. ...

Defined in override Ext.diag.layout.Context.

\n

Parameters

Ext.layout.Context
view source
( layout, ownerContext, firstTime )
Resets the given layout object. ...

Resets the given layout object. This is called at the start of the run and can also\nbe called during the run by calling invalidate.

\n\n

Overridden in Ext.diag.layout.Context.

\n

Parameters

Ext.layout.Context
view source
( t )private
Defined in override Ext.diag.layout.Context. ...

Defined in override Ext.diag.layout.Context.

\n

Parameters

Ext.layout.Context
view source
( ) : Boolean
Runs the layout calculations. ...

Runs the layout calculations. This can be called only once on this object.

\n\n

Overridden in Ext.diag.layout.Context.

\n

Returns

  • Boolean

    True if all layouts were completed, false if not.

    \n
Ext.layout.Context
view source
( )private
...
\n
Ext.layout.Context
view source
( ) : Booleanprotected
Performs one layout cycle by calling each layout in the layout queue. ...

Performs one layout cycle by calling each layout in the layout queue.

\n\n

Overridden in Ext.diag.layout.Context.

\n

Returns

  • Boolean

    True if some progress was made, false if not.

    \n
Ext.layout.Context
view source
( layout )private
Runs one layout as part of a cycle. ...

Runs one layout as part of a cycle.

\n\n

Overridden in Ext.diag.layout.Context.

\n

Parameters

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

Parameters

Returns

Ext.layout.Context
view source
( items, width, height )
Set the size of a component, element or composite or an array of components or elements. ...

Set the size of a component, element or composite or an array of components or elements.

\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

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"],"meta":{"private":true},"code_type":"ext_define","requires":["Ext.fx.Anim","Ext.fx.Manager","Ext.layout.ContextItem","Ext.layout.Layout","Ext.util.Queue"],"html_meta":{"private":null},"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":"Context2.html#Ext-layout-Context","filename":"Context.js"},{"href":"Context.html#Ext-diag-layout-Context","filename":"Context.js"}],"linenr":1,"members":{"property":[{"tagname":"property","owner":"Ext.Base","meta":{"private":true},"name":"$className","id":"property-S-className"},{"tagname":"property","owner":"Ext.Base","meta":{"private":true},"name":"configMap","id":"property-configMap"},{"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.Base","meta":{"private":true},"name":"isInstance","id":"property-isInstance"},{"tagname":"property","owner":"Ext.layout.Context","meta":{},"name":"layoutQueue","id":"property-layoutQueue"},{"tagname":"property","owner":"Ext.layout.Context","meta":{"private":true},"name":"logOn","id":"property-logOn"},{"tagname":"property","owner":"Ext.layout.Context","meta":{"private":true},"name":"remainingLayouts","id":"property-remainingLayouts"},{"tagname":"property","owner":"Ext.Base","meta":{"protected":true},"name":"self","id":"property-self"},{"tagname":"property","owner":"Ext.layout.Context","meta":{},"name":"state","id":"property-state"}],"cfg":[],"css_var":[],"method":[{"tagname":"method","owner":"Ext.layout.Context","meta":{},"name":"constructor","id":"method-constructor"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"callLayout","id":"method-callLayout"},{"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.Context","meta":{"private":true},"name":"cancelComponent","id":"method-cancelComponent"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"cancelLayout","id":"method-cancelLayout"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"chainFns","id":"method-chainFns"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"checkRemainingLayouts","id":"method-checkRemainingLayouts"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"clearTriggers","id":"method-clearTriggers"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"configClass","id":"method-configClass"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"destroy","id":"method-destroy"},{"tagname":"method","owner":"Ext.layout.Context","meta":{},"name":"flush","id":"method-flush"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"flushAnimations","id":"method-flushAnimations"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"flushInvalidates","id":"method-flushInvalidates"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"flushLayouts","id":"method-flushLayouts"},{"tagname":"method","owner":"Ext.layout.Context","meta":{},"name":"getCmp","id":"method-getCmp"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"getConfig","id":"method-getConfig"},{"tagname":"method","owner":"Ext.layout.Context","meta":{},"name":"getEl","id":"method-getEl"},{"tagname":"method","owner":"Ext.Base","meta":{},"name":"getInitialConfig","id":"method-getInitialConfig"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"getItem","id":"method-getItem"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"getLayoutName","id":"method-getLayoutName"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"handleFailure","id":"method-handleFailure"},{"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.Context","meta":{},"name":"invalidate","id":"method-invalidate"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"layoutDone","id":"method-layoutDone"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"layoutTreeHasFailures","id":"method-layoutTreeHasFailures"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"newQueue","id":"method-newQueue"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"onConfigUpdate","id":"method-onConfigUpdate"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"processInvalidate","id":"method-processInvalidate"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"queueAnimation","id":"method-queueAnimation"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"queueCompletion","id":"method-queueCompletion"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"queueFinalize","id":"method-queueFinalize"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"queueFlush","id":"method-queueFlush"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"queueInvalidate","id":"method-queueInvalidate"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"queueItemLayouts","id":"method-queueItemLayouts"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"queueLayout","id":"method-queueLayout"},{"tagname":"method","owner":"Ext.layout.Context","meta":{},"name":"removeEl","id":"method-removeEl"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"reportLayoutResult","id":"method-reportLayoutResult"},{"tagname":"method","owner":"Ext.layout.Context","meta":{},"name":"resetLayout","id":"method-resetLayout"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"round","id":"method-round"},{"tagname":"method","owner":"Ext.layout.Context","meta":{},"name":"run","id":"method-run"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"runComplete","id":"method-runComplete"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"protected":true},"name":"runCycle","id":"method-runCycle"},{"tagname":"method","owner":"Ext.layout.Context","meta":{"private":true},"name":"runLayout","id":"method-runLayout"},{"tagname":"method","owner":"Ext.Base","meta":{"chainable":true,"private":true},"name":"setConfig","id":"method-setConfig"},{"tagname":"method","owner":"Ext.layout.Context","meta":{},"name":"setItemSize","id":"method-setItemSize"},{"tagname":"method","owner":"Ext.Base","meta":{"protected":true},"name":"statics","id":"method-statics"}],"event":[],"css_mixin":[]},"inheritable":null,"private":true,"component":false,"name":"Ext.layout.Context","singleton":false,"override":null,"inheritdoc":null,"id":"class-Ext.layout.Context","mixins":[],"mixedInto":[]});