For up to date documentation and features, visit http://docs.sencha.com/ext-js/4-0

Sencha Documentation

Handles class creation throughout the whole framework. Note that most of the time Ext.define should be used instead, since it's a higher level wrapper that aliases to Ext.ClassManager.create to enable namespacing and dynamic dependency resolution.

Basic syntax:

Ext.define(className, properties);

in which properties is an object represent a collection of properties that apply to the class. See Ext.ClassManager.create for more detailed instructions.

Ext.define('Person', {
     name: 'Unknown',

     constructor: function(name) {
         if (name) {
             this.name = name;
         }

         return this;
     },

     eat: function(foodType) {
         alert("I'm eating: " + foodType);

         return this;
     }
});

var aaron = new Person("Aaron");
aaron.eat("Sandwich"); // alert("I'm eating: Sandwich");

Ext.Class has a powerful set of extensible pre-processors which takes care of everything related to class creation, including but not limited to inheritance, mixins, configuration, statics, etc.

Inheritance:

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

     constructor: function(name, isGeek) {
         this.isGeek = isGeek;

         // Apply a method from the parent class' prototype
         this.callParent([name]);

         return this;

     },

     code: function(language) {
         alert("I'm coding in: " + language);

         this.eat("Bugs");

         return this;
     }
});

var jacky = new Developer("Jacky", true);
jacky.code("JavaScript"); // alert("I'm coding in: JavaScript");
                          // alert("I'm eating: Bugs");

See Ext.Base.callParent for more details on calling superclass' methods

Mixins:

Ext.define('CanPlayGuitar', {
     playGuitar: function() {
        alert("F#...G...D...A");
     }
});

Ext.define('CanComposeSongs', {
     composeSongs: function() { ... }
});

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

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

     mixins: {
         canPlayGuitar: 'CanPlayGuitar',
         canComposeSongs: 'CanComposeSongs',
         canSing: 'CanSing'
     }
})

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

     mixins: {
         canPlayGuitar: 'CanPlayGuitar',
         canSing: 'CanSing'
     },

     sing: function() {
         alert("Ahem....");

         this.mixins.canSing.sing.call(this);

         alert("[Playing guitar at the same time...]");

         this.playGuitar();
     }
});

var me = new CoolPerson("Jacky");

me.sing(); // alert("Ahem...");
           // alert("I'm on the highway to hell...");
           // alert("[Playing guitar at the same time...]");
           // alert("F#...G...D...A");

Config:

Ext.define('SmartPhone', {
     config: {
         hasTouchScreen: false,
         operatingSystem: 'Other',
         price: 500
     },

     isExpensive: false,

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

         return this;
     },

     applyPrice: function(price) {
         this.isExpensive = (price > 500);

         return price;
     },

     applyOperatingSystem: function(operatingSystem) {
         if (!(/^(iOS|Android|BlackBerry)$/i).test(operatingSystem)) {
             return 'Other';
         }

         return operatingSystem;
     }
});

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

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

iPhone.isExpensive; // false;
iPhone.setPrice(600);
iPhone.getPrice(); // 600
iPhone.isExpensive; // true;

iPhone.setOperatingSystem('AlienOS');
iPhone.getOperatingSystem(); // 'Other'

Statics:

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');

Also see Ext.Base.statics and Ext.Base.self for more details on accessing static properties within class methods

Defined By

Methods

 

Retrieve the array stack of default pre-processors

Retrieve the array stack of default pre-processors

Returns

  • Function   

    defaultPreprocessors

 
getPreprocessor( String name) : Function

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

Parameters

  • name : String

Returns

  • Function   

    preprocessor

 
registerPreprocessor( String name, Function fn, Object always) : Ext.Class

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

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

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

    Passed arguments for this function are:

    • {Function} cls: The created class
    • {Object} data: The set of properties passed in Ext.Class constructor
    • {Function} fn: The callback function that must to be executed when this pre-processor finishes, regardless of whether the processing is synchronous or aynchronous
  • always : Object

Returns

  • Ext.Class   

    this

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

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');

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   

    this

 
setDefaultPreprocessors( Array preprocessors) : Ext.Class

Set the default array stack of default pre-processors

Set the default array stack of default pre-processors

Parameters

  • preprocessors : Array

Returns

  • Ext.Class   

    this