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

## Sencha Documentation

# Ext.Class

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

Ext.Class
view source
getDefaultPreprocessors : Function

Retrieve the array stack of default pre-processors

Retrieve the array stack of default pre-processors

### Returns

- Function

  defaultPreprocessors

Ext.Class
view source
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

Ext.Class
view source
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

Ext.Class
view source
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

Ext.Class
view source
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