ExtJS 4 - Classes -Statics Examples

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.
The properties and methods should be given to a statics config inside the class.

Ext.define('MyApp.Utilities', {

    statics: {

        foo: function (a, b) {

            return a + b;

        }

    }

});

Ext.define('MyApp.MyView', {

    extends: 'Ext.panel.Panel',

    requires: ['MyApp.Utilities'],

    initComponent: function () {

        MyApp.Utilities.foo(1, 2);

    }

});

Example 1:

// Statics defined in view
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');

Example 2:

Ext.define('MyApp.util.Utilities', {
    statics: {
        myGlobal: 1
    }
});
At which point you load the class up and from anywhere in the app you can write
MyApp.util.Utilities.myGlobal = 5

Example 3:

Ext.define('MyClass', {     statics: {         idSeed: 1000,         getNextId: function() {             return this.idSeed++;         }     } });

Because of the Statics preprocessor, we can now call the function statically on the Class (e.g. without creating an instance of MyClass):

MyClass.getNextId(); //1000 MyClass.getNextId(); //1001 MyClass.getNextId(); //1002 ... etc

Ext.define('MyClass', {

    extend: 'Ext.Window'

}, function() {

   //this callback is called when MyClass is ready for use

   var cls = new MyClass();

   cls.setTitle('Everything is ready');

   cls.show();

});

Example 4 :

//Statics scope
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

Example 5:

In the example, we are defining a static varaible “count” and two static method “getcount” and “incement”. To access the count property, we are using “Training.class.Person.count” no need of instance. Similarly for method “Training.class.Person.increment() and getCount()”.

To access the static variable in a non static method use “this.static().propertyname”. We are doing that in “getOuterCount” method. This is called by “newPerson.getOuterCount()” from the init function.

// Define a person class

Ext.define('Training.class.Person', {

    // list of properties, setter and getter of all the property will

    // be available on instantiation.

    config:{

        firstname:'',

        lastname:'',

        age:'',

        city:'',

        country:''

    },

    constructor:function (config) {

        this.initConfig(config);

    },

    applyFirstname:function (value) {

        return value.toUpperCase();

    },

    getLongName:function () {

        return this.firstname + "," + this.lastname;

    },

    statics:{

        count:'',

        getCount:function () {

            return this.count;

        },

        increment:function () {

            this.count++;

        }

    },

    // refer the static property by this.statics().count

    getOuterCount:function () {

        return this.statics().count;

    }

});

var init = function () {

    var newPerson = Ext.create('Training.class.Person', {

        firstname:'John'

    });

    // Setting count value

    Training.class.Person.count = 10;

    Training.class.Person.increment();

    console.log("Count after increment is " + Training.class.Person.getCount());

    console.log("Count from method " + newPerson.getOuterCount());

};

Ext.onReady(init);