Ext JS 4.0.7 Sencha Docs

Ext.Class

Files

Handles class creation throughout the framework. This is a low level factory that is used by Ext.ClassManager and generally should not be used directly. If you choose to use Ext.Class you will lose out on the namespace, aliasing and depency loading features made available by Ext.ClassManager. The only time you would use Ext.Class directly is to create an anonymous class.

If you wish to create a class you should use Ext.define which aliases Ext.ClassManager.create to enable namespacing and dynamic dependency resolution.

Ext.Class is the factory and not the superclass of everything. For the base class that all Ext classes inherit from, see Ext.Base.

Available since: 4.0.0

Defined By

Config options

List of short aliases for class names. ...

List of short aliases for class names. Most useful for defining xtypes for widgets:

Ext.define('MyApp.CoolPanel', {
    extend: 'Ext.panel.Panel',
    alias: ['widget.coolpanel'],
    title: 'Yeah!'
});

// Using Ext.create
Ext.widget('widget.coolpanel');
// Using the shorthand for widgets and in xtypes
Ext.widget('panel', {
    items: [
        {xtype: 'coolpanel', html: 'Foo'},
        {xtype: 'coolpanel', html: 'Bar'}
    ]
});

Available since: 4.0.2

Defines alternate names for this class. ...

Defines alternate names for this class. For example:

Ext.define('Developer', {
    alternateClassName: ['Coder', 'Hacker'],
    code: function(msg) {
        alert('Typing... ' + msg);
    }
});

var joe = Ext.create('Developer');
joe.code('stackoverflow');

var rms = Ext.create('Hacker');
rms.code('hack hack');

Available since: 4.0.2

List of configuration options with their default values, for which automatically accessor methods are generated. ...

List of configuration options with their default values, for which automatically accessor methods are generated. For example:

Ext.define('SmartPhone', {
     config: {
         hasTouchScreen: false,
         operatingSystem: 'Other',
         price: 500
     },
     constructor: function(cfg) {
         this.initConfig(cfg);
     }
});

var iPhone = new SmartPhone({
     hasTouchScreen: true,
     operatingSystem: 'iOS'
});

iPhone.getPrice(); // 500;
iPhone.getOperatingSystem(); // 'iOS'
iPhone.getHasTouchScreen(); // true;
iPhone.hasTouchScreen(); // true

Available since: 4.0.2

The parent class that this class extends. ...

The parent class that this class extends. For example:

Ext.define('Person', {
    say: function(text) { alert(text); }
});

Ext.define('Developer', {
    extend: 'Person',
    say: function(text) { this.callParent(["print "+text]); }
});

Available since: 4.0.2

List of inheritable static methods for this class. ...

List of inheritable static methods for this class. Otherwise just like statics but subclasses inherit these methods.

Available since: 4.0.2

List of classes to mix into this class. ...

List of classes to mix into this class. For example:

Ext.define('CanSing', {
     sing: function() {
         alert("I'm on the highway to hell...")
     }
});

Ext.define('Musician', {
     extend: 'Person',

     mixins: {
         canSing: 'CanSing'
     }
})

Available since: 4.0.2

Defines an override applied to a class. ...

Defines an override applied to a class. Note that overrides can only be created using Ext.define. Ext.ClassManager.create only creates classes.

To define an override, include the override property. The content of an override is aggregated with the specified class in order to extend or modify that class. This can be as simple as setting default property values or it can extend and/or replace methods. This can also extend the statics of the class.

One use for an override is to break a large class into manageable pieces.

 // File: /src/app/Panel.js

 Ext.define('My.app.Panel', {
     extend: 'Ext.panel.Panel',
     requires: [
         'My.app.PanelPart2',
         'My.app.PanelPart3'
     ]

     constructor: function (config) {
         this.callSuper(arguments); // calls Ext.panel.Panel's constructor
         //...
     },

     statics: {
         method: function () {
             return 'abc';
         }
     }
 });

 // File: /src/app/PanelPart2.js
 Ext.define('My.app.PanelPart2', {
     override: 'My.app.Panel',

     constructor: function (config) {
         this.callSuper(arguments); // calls My.app.Panel's constructor
         //...
     }
 });

Another use of overrides is to provide optional parts of classes that can be independently required. In this case, the class may even be unaware of the override altogether.

 Ext.define('My.ux.CoolTip', {
     override: 'Ext.tip.ToolTip',

     constructor: function (config) {
         this.callSuper(arguments); // calls Ext.tip.ToolTip's constructor
         //...
     }
 });

The above override can now be required as normal.

 Ext.define('My.app.App', {
     requires: [
         'My.ux.CoolTip'
     ]
 });

Overrides can also contain statics:

 Ext.define('My.app.BarMod', {
     override: 'Ext.foo.Bar',

     statics: {
         method: function (x) {
             return this.callSuper([x * 2]); // call Ext.foo.Bar.method
         }
     }
 });

IMPORTANT: An override is only included in a build if the class it overrides is required. Otherwise, the override, like the target class, is not included.

Available since: Ext JS 4.0.7

List of classes that have to be loaded before instantiating this class. ...

List of classes that have to be loaded before instantiating this class. For example:

Ext.define('Mother', {
    requires: ['Child'],
    giveBirth: function() {
        // we can be sure that child class is available.
        return new Child();
    }
});

Available since: 4.0.2

When set to true, the class will be instantiated as singleton. ...

When set to true, the class will be instantiated as singleton. For example:

Ext.define('Logger', {
    singleton: true,
    log: function(msg) {
        console.log(msg);
    }
});

Logger.log('Hello');

Available since: 4.0.2

List of static methods for this class. ...

List of static methods for this class. For example:

Ext.define('Computer', {
     statics: {
         factory: function(brand) {
             // 'this' in static methods refer to the class itself
             return new this(brand);
         }
     },

     constructor: function() { ... }
});

var dellComputer = Computer.factory('Dell');

Available since: 4.0.2

Ext.Class
view source
: String[]
List of classes to load together with this class. ...

List of classes to load together with this class. These aren't neccessarily loaded before this class is instantiated. For example:

Ext.define('Mother', {
    uses: ['Child'],
    giveBirth: function() {
        // This code might, or might not work:
        // return new Child();

        // Instead use Ext.create() to load the class at the spot if not loaded already:
        return Ext.create('Child');
    }
});

Available since: 4.0.2

Defined By

Properties

...

Defaults to: {}

Available since: 4.0.0

Methods

Defined By

Instance methods

Ext.Class
view source
new( classData, [createdFn] ) : Ext.Base
Creates new class. ...

Creates new class.

Available since: 4.0.0

Parameters

  • classData : Object

    An object represent the properties of this class

  • createdFn : Function (optional)

    The callback function to be executed when this class is fully created. Note that the creation process can be asynchronous depending on the pre-processors used.

Returns

Defined By

Static methods

Retrieve the array stack of default pre-processors ...

Retrieve the array stack of default pre-processors

Available since: Ext JS 4.0.7

Returns

Ext.Class
view source
( name ) : Functionstatic
Retrieve a pre-processor callback function by its name, which has been registered before ...

Retrieve a pre-processor callback function by its name, which has been registered before

Available since: Ext JS 4.0.7

Parameters

Returns

Ext.Class
view source
( name, fn ) : Ext.Classchainablestatic
Register a new pre-processor to be used during the class creation process ...

Register a new pre-processor to be used during the class creation process

Available since: Ext JS 4.0.7

Parameters

  • name : String

    The pre-processor's name

  • fn : Function

    The callback function to be executed. Typical format:

    function(cls, data, fn) {
        // Your code here
    
        // Execute this when the processing is finished.
        // Asynchronous processing is perfectly ok
        if (fn) {
            fn.call(this, cls, data);
        }
    });
    

    Parameters

    • cls : Function

      The created class

    • data : Object

      The set of properties passed in Ext.Class constructor

    • fn : Function

      The callback function that must to be executed when this pre-processor finishes, regardless of whether the processing is synchronous or aynchronous

Returns

Ext.Class
view source
( name, offset, relativeName ) : Ext.Classchainablestatic
Inserts this pre-processor at a specific position in the stack, optionally relative to any existing pre-processor. ...

Inserts this pre-processor at a specific position in the stack, optionally relative to any existing pre-processor. For example:

Ext.Class.registerPreprocessor('debug', function(cls, data, fn) {
    // Your code here

    if (fn) {
        fn.call(this, cls, data);
    }
}).setDefaultPreprocessorPosition('debug', 'last');

Available since: Ext JS 4.0.7

Parameters

  • name : String

    The pre-processor name. Note that it needs to be registered with registerPreprocessor before this

  • offset : String

    The insertion position. Four possible values are: 'first', 'last', or: 'before', 'after' (relative to the name provided in the third argument)

  • relativeName : String

Returns

Ext.Class
view source
( preprocessors ) : Ext.Classchainablestatic
Set the default array stack of default pre-processors ...

Set the default array stack of default pre-processors

Available since: Ext JS 4.0.7

Parameters

Returns