Ext JS 4.1.3 Sencha Docs

Ext.util.Renderable

Hierarchy

Ext.Base
Ext.util.Renderable

Requires

Mixed into

Files

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

Given a component hierarchy of this:

 {
     xtype: 'panel',
     id: 'ContainerA',
     layout: 'hbox',
     renderTo: Ext.getBody(),
     items: [
         {
             id: 'ContainerB',
             xtype: 'container',
             items: [
                 { id: 'ComponentA' }
             ]
         }
     ]
 }

The rendering of the above proceeds roughly like this:

  • ContainerA's initComponent calls render passing the renderTo property as the container argument.
  • render calls the getRenderTree method to get a complete Ext.DomHelper spec.
  • getRenderTree fires the "beforerender" event and calls the beforeRender method. Its result is obtained by calling getElConfig.
  • The getElConfig method uses the renderTpl and its render data as the content of the autoEl described element.
  • The result of getRenderTree is passed to Ext.DomHelper.append.
  • The renderTpl contains calls to render things like docked items, container items and raw markup (such as the html or tpl config properties). These calls are to methods added to the Ext.XTemplate instance by setupRenderTpl.
  • The setupRenderTpl method adds methods such as renderItems, renderContent, etc. to the template. These are directed to "doRenderItems", "doRenderContent" etc..
  • The setupRenderTpl calls traverse from components to their Ext.layout.Layout object.
  • When a container is rendered, it also has a renderTpl. This is processed when the renderContainer method is called in the component's renderTpl. This call goes to Ext.layout.container.Container.doRenderContainer. This method repeats this process for all components in the container.
  • After the top-most component's markup is generated and placed in to the DOM, the next step is to link elements to their components and finish calling the component methods onRender and afterRender as well as fire the corresponding events.
  • The first step in this is to call finishRender. This method descends the component hierarchy and calls onRender and fires the render event. These calls are delivered top-down to approximate the timing of these calls/events from previous versions.
  • During the pass, the component's el is set. Likewise, the renderSelectors and childEls are applied to capture references to the component's elements.
  • These calls are also made on the Ext.layout.container.Container layout to capture its elements. Both of these classes use Ext.util.ElementContainer to handle childEls processing.
  • Once this is complete, a similar pass is made by calling #finishAfterRender. This call also descends the component hierarchy, but this time the calls are made in a bottom-up order to afterRender.

Available since: 4.1.0

Properties

Defined By

Instance properties

...

Defaults to: 'Ext.Base'

Available since: 4.1.1

...

Defaults to: {}

Available since: 4.1.1

Ext.util.Renderable
view source
: Stringprivate
...

Defaults to: Ext.baseCSSPrefix + 'frame'

Available since: 4.1.0

Ext.util.Renderable
view source
: Arrayprivate
...

Defaults to: ['TL', 'TC', 'TR', 'ML', 'MC', 'MR', 'BL', 'BC', 'BR']

Available since: 4.1.0

Ext.util.Renderable
view source
: Objectprivate
...

Defaults to: {tl: [], tc: [], tr: [], ml: [], mc: [], mr: [], bl: [], bc: [], br: []}

Available since: 4.1.0

Ext.util.Renderable
view source
: RegExpprivate
...

Defaults to: /[\-]frame\d+[TMB][LCR]$/

Available since: 4.1.0

Ext.util.Renderable
view source
: Objectprivate
Cache the frame information object so as not to cause style recalculations ...

Cache the frame information object so as not to cause style recalculations

Defaults to: {}

Available since: 4.1.0

Ext.util.Renderable
view source
: Arrayprivate
...

Defaults to: ['{%this.renderDockedItems(out,values,0);%}', '<table><tbody>', '<tpl if="top">', '<tr>', '<tpl if="left"><td id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl>" style="background-position: {tl}; padding-left:{frameWidth}px" role="presentation"></td></tpl>', '<td id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl>" style="background-position: {tc}; height: {frameWidth}px" role="presentation"></td>', '<tpl if="right"><td id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl>" style="background-position: {tr}; padding-left: {frameWidth}px" role="presentation"></td></tpl>', '</tr>', '</tpl>', '<tr>', '<tpl if="left"><td id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl>" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"></td></tpl>', '<td id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl>" style="background-position: 0 0;" role="presentation">', '{%this.applyRenderTpl(out, values)%}', '</td>', '<tpl if="right"><td id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl>" style="background-position: {mr}; padding-left: {frameWidth}px" role="presentation"></td></tpl>', '</tr>', '<tpl if="bottom">', '<tr>', '<tpl if="left"><td id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl>" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"></td></tpl>', '<td id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl>" style="background-position: {bc}; height: {frameWidth}px" role="presentation"></td>', '<tpl if="right"><td id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl>" style="background-position: {br}; padding-left: {frameWidth}px" role="presentation"></td></tpl>', '</tr>', '</tpl>', '</tbody></table>', '{%this.renderDockedItems(out,values,1);%}']

Available since: 4.1.0

Ext.util.Renderable
view source
: Arrayprivate
...

Defaults to: ['{%this.renderDockedItems(out,values,0);%}', '<tpl if="top">', '<tpl if="left"><div id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl>" style="background-position: {tl}; padding-left: {frameWidth}px" role="presentation"></tpl>', '<tpl if="right"><div id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl>" style="background-position: {tr}; padding-right: {frameWidth}px" role="presentation"></tpl>', '<div id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl>" style="background-position: {tc}; height: {frameWidth}px" role="presentation"></div>', '<tpl if="right"></div></tpl>', '<tpl if="left"></div></tpl>', '</tpl>', '<tpl if="left"><div id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl>" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"></tpl>', '<tpl if="right"><div id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl>" style="background-position: {mr}; padding-right: {frameWidth}px" role="presentation"></tpl>', '<div id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl>" role="presentation">', '{%this.applyRenderTpl(out, values)%}', '</div>', '<tpl if="right"></div></tpl>', '<tpl if="left"></div></tpl>', '<tpl if="bottom">', '<tpl if="left"><div id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl>" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"></tpl>', '<tpl if="right"><div id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl>" style="background-position: {br}; padding-right: {frameWidth}px" role="presentation"></tpl>', '<div id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl>" style="background-position: {bc}; height: {frameWidth}px" role="presentation"></div>', '<tpl if="right"></div></tpl>', '<tpl if="left"></div></tpl>', '</tpl>', '{%this.renderDockedItems(out,values,1);%}']

Available since: 4.1.0

...

Defaults to: []

Available since: 4.1.1

...

Defaults to: {}

Available since: 4.1.1

...

Defaults to: true

Available since: 4.1.1

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, this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics for a detailed comparison

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // dependent on 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat'
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'

Available since: 4.0.0

Defined By

Static properties

...

Defaults to: []

Available since: 4.1.1

Methods

Defined By

Instance methods

Ext.util.Renderable
view source
( width, height )private
...

Available since: 4.1.0

Parameters

Fires

  • boxready
  • highlightitem
  • move
Ext.util.Renderable
view source
( )protectedtemplate
Allows addition of behavior after rendering is complete. ...

Allows addition of behavior after rendering is complete. At this stage the Component’s Element will have been styled according to the configuration, will have had any configured CSS class names added, and will be in the configured visibility and the configured enable state.

Available since: 4.1.0

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

Fires

    Ext.util.Renderable
    view source
    ( )private
    Sets references to elements inside the component. ...

    Sets references to elements inside the component. This applies renderSelectors as well as childEls.

    Available since: 4.1.0

    Fires

      Ext.util.Renderable
      view source
      ( )private
      ...

      Available since: 4.1.0

      Fires

        Ext.util.Renderable
        view source
        ( left, top )private
        ...

        Available since: 4.1.0

        Parameters

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

        Call the original method that was previously overridden with override

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

        Available since: 4.0.0

        This method has been deprecated

        as of 4.1. Use callParent instead.

        Parameters

        • args : Array/Arguments

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

        Returns

        • Object

          Returns the result of calling the overridden method

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

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

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

        This can be used with an override as follows:

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

        This also works with static methods.

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

        Lastly, it also works with overridden static methods.

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

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

        Available since: 4.0.0

        Parameters

        • args : Array/Arguments

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

        Returns

        • Object

          Returns the result of calling the parent method

        ( args ) : Objectprotected
        This method is used by an override to call the superclass method but bypass any overridden method. ...

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

        Consider:

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

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

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

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

        Available since: Ext JS 4.1.3

        Parameters

        • args : Array/Arguments

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

        Returns

        • Object

          Returns the result of calling the superclass method

        ...

        Available since: 4.1.1

        Ext.util.Renderable
        view source
        ( out, values )private
        Called from the selected frame generation template to insert this Component's inner structure inside the framing stru...

        Called from the selected frame generation template to insert this Component's inner structure inside the framing structure.

        When framing is used, a selected frame generation template is used as the primary template of the getElConfig instead of the configured renderTpl. The renderTpl is invoked by this method which is injected into the framing template.

        Available since: 4.1.0

        Parameters

        Ext.util.Renderable
        view source
        ( )
        Handles autoRender. ...

        Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body

        Available since: 4.1.0

        Fires

        • afterrender
        • beforerender
        • highlightitem
        • move
        • render
        Ext.util.Renderable
        view source
        ( out, renderData )private
        ...

        Available since: 4.1.0

        Parameters

        Ext.util.Renderable
        view source
        ( out, renderData, after )private
        ...

        Available since: 4.1.0

        Parameters

        Ext.util.Renderable
        view source
        ( [runLayout] )
        Ensures that this component is attached to document.body. ...

        Ensures that this component is attached to document.body. If the component was rendered to Ext.getDetachedBody, then it will be appended to document.body. Any configured position is also restored.

        Available since: 4.1.0

        Parameters

        • runLayout : Boolean (optional)

          True to run the component's layout.

          Defaults to: false

        Fires

        • move
        Ext.util.Renderable
        view source
        ( containerIdx )private
        This method visits the rendered component tree in a "top-down" order. ...

        This method visits the rendered component tree in a "top-down" order. That is, this code runs on a parent component before running on a child. This method calls the onRender method of each component.

        Available since: 4.1.0

        Parameters

        • containerIdx : Number

          The index into the Container items of this Component.

        Fires

        • afterrender
        • highlightitem
        • move
        • render
        Ext.util.Renderable
        view source
        ( )private
        ...

        Available since: 4.1.0

        Fires

          ...

          Available since: 4.1.0

          Parameters

          Ext.util.Renderable
          view source
          ( )private
          ...

          Available since: 4.1.0

          Fires

            Ext.util.Renderable
            view source
            ( )private
            On render, reads an encoded style attribute, "background-position" from the style of this Component's element. ...

            On render, reads an encoded style attribute, "background-position" from the style of this Component's element. This information is memoized based upon the CSS class name of this Component's element. Because child Components are rendered as textual HTML as part of the topmost Container, a dummy div is inserted into the document to receive the document element's CSS class name, and therefore style attributes.

            Available since: 4.1.0

            Fires

              Ext.util.Renderable
              view source
              ( frameInfo )private
              ...

              Available since: 4.1.0

              Parameters

              Ext.util.Renderable
              view source
              ( table )private
              ...

              Available since: 4.1.0

              Parameters

              Fires

                Returns the initial configuration passed to constructor when instantiating this class. ...

                Returns the initial configuration passed to constructor when instantiating this class.

                Available since: 4.1.0

                Parameters

                • name : String (optional)

                  Name of the config option to return.

                Returns

                • Object/Mixed

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

                Ext.util.Renderable
                view source
                ( position ) : HTMLElement
                This function takes the position argument passed to onRender and returns a DOM element that you can use in the insert...

                This function takes the position argument passed to onRender and returns a DOM element that you can use in the insertBefore.

                Available since: 4.1.0

                Parameters

                Returns

                • HTMLElement

                  DOM element that you can use in the insertBefore

                Ext.util.Renderable
                view source
                ( )private
                ...

                Available since: 4.1.0

                Fires

                • beforerender
                Ext.util.Renderable
                view source
                ( cls )private
                Returns an offscreen div with the same class name as the element this is being rendered. ...

                Returns an offscreen div with the same class name as the element this is being rendered. This is because child item rendering takes place in a detached div which, being not part of the document, has no styling.

                Available since: 4.1.0

                Parameters

                ...

                Available since: 4.1.0

                Parameters

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

                Initialize configuration for this class. a typical example:

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

                Available since: 4.0.0

                Parameters

                Returns

                Ext.util.Renderable
                view source
                ( container )private
                ...

                Available since: 4.1.0

                Parameters

                Ext.util.Renderable
                view source
                ( )private
                ...

                Available since: 4.1.0

                Fires

                  Ext.util.Renderable
                  view source
                  ( table )private
                  Poke in a reference to applyRenderTpl(frameInfo, out) ...

                  Poke in a reference to applyRenderTpl(frameInfo, out)

                  Available since: 4.1.0

                  Parameters

                  Fires

                    Ext.util.Renderable
                    view source
                    ( ) : Objectprotected
                    Initialized the renderData to be used when rendering the renderTpl. ...

                    Initialized the renderData to be used when rendering the renderTpl.

                    Available since: 4.1.0

                    Returns

                    • Object

                      Object with keys and values that are going to be applied to the renderTpl

                    Ext.util.Renderable
                    view source
                    ( ) : Ext.XTemplateprivate
                    Initializes the renderTpl. ...

                    Initializes the renderTpl.

                    Available since: 4.1.0

                    Returns

                    Fires

                      Ext.util.Renderable
                      view source
                      ( )private
                      ...

                      Available since: 4.1.0

                      ( names, callback, scope )private
                      ...

                      Available since: 4.1.0

                      Parameters

                      Ext.util.Renderable
                      view source
                      ( parentNode, containerIdx )protectedtemplate
                      Template method called when this Component's DOM structure is created. ...

                      Template method called when this Component's DOM structure is created.

                      At this point, this Component's (and all descendants') DOM structure exists but it has not been layed out (positioned and sized).

                      Subclasses which override this to gain access to the structure at render time should call the parent class's method before attempting to access any child elements of the Component.

                      Available since: 4.1.0

                      This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

                      Parameters

                      • parentNode : Ext.core.Element

                        The parent Element in which this Component's encapsulating element is contained.

                      • containerIdx : Number

                        The index within the parent Container's child collection of this Component.

                      Fires

                        Ext.util.Renderable
                        view source
                        ( [container], [position] )
                        Renders the Component into the passed HTML element. ...

                        Renders the Component into the passed HTML element.

                        If you are using a Container object to house this Component, then do not use the render method.

                        A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

                        If the Container is already rendered when a new child Component is added, you may need to call the Container's doLayout to refresh the view which causes any unrendered child Components to be rendered. This is required so that you can add multiple child components if needed while only refreshing the layout once.

                        When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's layout manager. If you expect child items to be sized in response to user interactions, you must configure the Container with a layout manager which creates and manages the type of layout you have in mind.

                        Omitting the Container's layout config means that a basic layout manager is used which does nothing but render child components sequentially into the Container. No sizing or positioning will be performed in this situation.

                        Available since: 4.1.0

                        Parameters

                        • container : Ext.Element/HTMLElement/String (optional)

                          The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.

                        • position : String/Number (optional)

                          The element ID or DOM node index within the container before which this component will be inserted (defaults to appending to the end of the container)

                        Fires

                        • afterrender
                        • beforerender
                        • highlightitem
                        • move
                        • render
                        ( config, applyIfNotSet ) : Ext.Basechainableprivate
                        ...

                        Available since: 4.0.0

                        Parameters

                        Returns

                        Ext.util.Renderable
                        view source
                        ( frameTpl )private
                        Inject a reference to the function which applies the render template into the framing template. ...

                        Inject a reference to the function which applies the render template into the framing template. The framing template wraps the content.

                        Available since: 4.1.0

                        Parameters

                        Ext.util.Renderable
                        view source
                        ( renderTpl )private
                        ...

                        Available since: 4.1.0

                        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, this.statics() is scope-independent and it always returns the class from which it was called, regardless of what this points to during run-time

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

                        Available since: 4.0.0

                        Returns

                        Ext.util.Renderable
                        view source
                        ( )private
                        ...

                        Available since: 4.1.0

                        Fires

                          Ext.util.Renderable
                          view source
                          ( dom )private
                          ...

                          Available since: 4.1.0

                          Parameters

                          Defined By

                          Static methods

                          ( config )privatestatic
                          ...

                          Available since: 4.1.1

                          Parameters

                          ( members )chainableprivatestatic
                          ...

                          Available since: 4.1.1

                          Parameters

                          ( name, member )chainableprivatestatic
                          ...

                          Available since: 4.1.1

                          Parameters

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

                          Add methods / properties to the prototype of this class.

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

                          Available since: 4.1.0

                          Parameters

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

                          Add / override static properties of this class.

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

                          Available since: 4.0.2

                          Parameters

                          Returns

                          ( xtype )chainableprivatestatic
                          ...

                          Available since: 4.1.1

                          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.

                          Ext.define('Bank', {
                              money: '$$$',
                              printMoney: function() {
                                  alert('$$$$$$$');
                              }
                          });
                          
                          Ext.define('Thief', {
                              ...
                          });
                          
                          Thief.borrow(Bank, ['money', 'printMoney']);
                          
                          var steve = new Thief();
                          
                          alert(steve.money); // alerts '$$$'
                          steve.printMoney(); // alerts '$$$$$$$'
                          

                          Available since: 4.0.2

                          Parameters

                          • fromClass : Ext.Base

                            The class to borrow members from

                          • members : Array/String

                            The names of the members to borrow

                          Returns

                          Create a new instance of this Class. ...

                          Create a new instance of this Class.

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

                          All parameters are passed to the constructor of the class.

                          Available since: 4.0.2

                          Returns

                          Overrides: Ext.layout.Layout.create

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

                          Create aliases for existing prototype methods. Example:

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

                          Available since: 4.0.2

                          Parameters

                          ( config )privatestatic
                          ...

                          Available since: 4.1.1

                          Parameters

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

                          Get the current class' name in string format.

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

                          Available since: 4.0.4

                          Returns

                          ( )deprecatedstatic
                          Adds members to class. ...

                          Adds members to class.

                          Available since: 4.0.2

                          This method has been deprecated since 4.1

                          Use addMembers instead.

                          ( name, mixinClass )chainableprivatestatic
                          Used internally by the mixins pre-processor ...

                          Used internally by the mixins pre-processor

                          Available since: 4.1.1

                          Parameters

                          ( fn, scope )chainableprivatestatic
                          ...

                          Available since: 4.1.1

                          Parameters

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

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

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

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

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

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

                          Available since: 4.0.2

                          This method has been deprecated since 4.1.0

                          Use Ext.define instead

                          Parameters

                          • members : Object

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

                          Returns

                          ...

                          Available since: 4.1.1