Touch 2.2.0 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 dependency 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: 2.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.create('widget.coolpanel');

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

Available since: 2.0.0

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

List of configuration options with their default values. ...

List of configuration options with their default values.

Note: You need to make sure Ext.Base.initConfig is called from your constructor if you are defining your own class or singleton, unless you are extending a Component. Otherwise the generated getter and setter methods will not be initialized.

Each config item will have its own setter and getter method automatically generated inside the class prototype during class creation time, if the class does not have those methods explicitly defined.

As an example, let's convert the name property of a Person class to be a config item, then add extra age and gender items.

Ext.define('My.sample.Person', {
    config: {
        name: 'Mr. Unknown',
        age: 0,
        gender: 'Male'
    },

    constructor: function(config) {
        this.initConfig(config);

        return this;
    }

    // ...
});

Within the class, this.name still has the default value of "Mr. Unknown". However, it's now publicly accessible without sacrificing encapsulation, via setter and getter methods.

var jacky = new Person({
    name: "Jacky",
    age: 35
});

alert(jacky.getAge());      // alerts 35
alert(jacky.getGender());   // alerts "Male"

jacky.walk(10);             // alerts "Jacky is walking 10 steps"

jacky.setName("Mr. Nguyen");
alert(jacky.getName());     // alerts "Mr. Nguyen"

jacky.walk(10);             // alerts "Mr. Nguyen is walking 10 steps"

Notice that we changed the class constructor to invoke this.initConfig() and pass in the provided config object. Two key things happened:

  • The provided config object when the class is instantiated is recursively merged with the default config object.
  • All corresponding setter methods are called with the merged values.

Beside storing the given values, throughout the frameworks, setters generally have two key responsibilities:

  • Filtering / validation / transformation of the given value before it's actually stored within the instance.
  • Notification (such as firing events) / post-processing after the value has been set, or changed from a previous value.

By standardize this common pattern, the default generated setters provide two extra template methods that you can put your own custom logics into, i.e: an "applyFoo" and "updateFoo" method for a "foo" config item, which are executed before and after the value is actually set, respectively. Back to the example class, let's validate that age must be a valid positive number, and fire an 'agechange' if the value is modified.

Ext.define('My.sample.Person', {
    config: {
        // ...
    },

    constructor: {
        // ...
    },

    applyAge: function(age) {
        if (typeof age !== 'number' || age < 0) {
            console.warn("Invalid age, must be a positive number");
            return;
        }

        return age;
    },

    updateAge: function(newAge, oldAge) {
        // age has changed from "oldAge" to "newAge"
        this.fireEvent('agechange', this, newAge, oldAge);
    }

    // ...
});

var jacky = new Person({
    name: "Jacky",
    age: 'invalid'
});

alert(jacky.getAge());      // alerts 0

alert(jacky.setAge(-100));  // alerts 0
alert(jacky.getAge());      // alerts 0

alert(jacky.setAge(35));    // alerts 0
alert(jacky.getAge());      // alerts 35

In other words, when leveraging the config feature, you mostly never need to define setter and getter methods explicitly. Instead, "apply" and "update" methods should be implemented where necessary. Your code will be consistent throughout and only contain the minimal logic that you actually care about.

When it comes to inheritance, the default config of the parent class is automatically, recursively merged with the child's default config. The same applies for mixins.

Available since: 2.0.0

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]);
    }
});

var person1 = Ext.create("Person");
person1.say("Bill");

var developer1 = Ext.create("Developer");
developer1.say("Ted");

Available since: 2.0.0

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

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

Allows for setting default config values on specific platforms or themes Ext.define('MyComponent', { config: { ...

Allows for setting default config values on specific platforms or themes

Ext.define('MyComponent', {
     config: {
         top: 0
     },

     platformConfig: [{
         platform: ['ie10'],
         theme: ['Windows'],
         top: null,
         bottom: 0
     }]
});

Available since: Touch 2.2.0

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

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

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

List of optional classes to load together with this class. These aren't necessarily loaded before this class is created, but are guaranteed to be available before Ext.onReady listeners are invoked

Available since: 2.0.0

Properties

Defined By

Static properties

Ext.Class
view source
: Objectprivatestatic
...

Defaults to: {}

Available since: 2.0.0

Ext.Class
view source
: Arrayprivatestatic
...

Defaults to: []

Available since: 2.0.0

Ext.Class
view source
: Objectprivatestatic
...

Defaults to: {}

Available since: 2.0.0

Methods

Defined By

Instance methods

Ext.Class
view source
new( data, [onCreated] ) : Ext.Base
Creates a new anonymous class. ...

Creates a new anonymous class.

Available since: 2.0.0

Parameters

  • data : Object

    An object represent the properties of this class.

  • onCreated : 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

Ext.Class
view source
( Class )privatestatic
...

Available since: 2.0.0

Parameters

Ext.Class
view source
( nameMap )privatestatic
...

Available since: 2.0.0

Parameters

Ext.Class
view source
( nameMap )privatestatic
...

Available since: 2.0.0

Parameters

Ext.Class
view source
( nameMap )privatestatic
...

Available since: 2.0.0

Parameters

Ext.Class
view source
( name )privatestatic
...

Available since: 2.0.0

Parameters

Ext.Class
view source
( ) : Functionprivatestatic
Retrieve the array stack of default pre-processors. ...

Retrieve the array stack of default pre-processors.

Available since: 2.0.0

Returns

Ext.Class
view source
( name ) : Functionprivatestatic
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: 2.0.0

Parameters

Returns

Ext.Class
view source
( )privatestatic
...

Available since: 2.0.0

Ext.Class
view source
( Class, data, hooks )privatestatic
...

Available since: 2.0.0

Parameters

Ext.Class
view source
( Class, data, onCreated )privatestatic
...

Available since: 2.0.0

Parameters

Ext.Class
view source
( name, fn, [properties], [position], [relativeTo] ) : Ext.Classchainableprivatestatic
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: 2.0.0

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

  • properties : String[] (optional)
  • position : String (optional)
  • relativeTo : Object (optional)

Returns

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

Insert 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);
    }
}).insertDefaultPreprocessor('debug', 'last');

Available since: 2.0.0

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.Classchainableprivatestatic
Set the default array stack of default pre-processors. ...

Set the default array stack of default pre-processors.

Available since: 2.0.0

Parameters

Returns