Clear Up
SharpKit Reference

ClassManager Class

Ext.ClassManager manages all classes and handles mapping from string class name to actual class objects throughout the whole framework. It is not generally accessed directly, rather through these convenient shorthands:

  • Ext.define
  • Ext.create
  • Ext.widget
  • Ext.getClass
  • Ext.getClassName

Basic syntax:

    Ext.define(className, properties);

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

    Ext.define('Person', {
            name: 'Unknown',
            constructor: function(name) {
            if (name) {
   = name;
            eat: function(foodType) {
            alert("I'm eating: " + foodType);
            return this;
            var aaron = new Person("Aaron");
  "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.


    Ext.define('Developer', {
            extend: 'Person',
            constructor: function(name, isGeek) {
            this.isGeek = isGeek;
            // Apply a method from the parent class' prototype
            code: function(language) {
            alert("I'm coding in: " + language);
            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


    Ext.define('CanPlayGuitar', {
            playGuitar: function() {
            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("[Playing guitar at the same time...]");
            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");


    Ext.define('SmartPhone', {
            config: {
            hasTouchScreen: false,
            operatingSystem: 'Other',
            price: 500
            isExpensive: false,
            constructor: function(config) {
            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.getPrice(); // 600
            iPhone.isExpensive; // true;
            iPhone.getOperatingSystem(); // 'Other'


    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

Namespace: Ext

Base Types



Name Description
create(object, object, object) Defines a class.

This method has been deprecated since 4.1.0

Use Ext.define instead, as that also supports creating overrides.

get(JsString) Retrieve a class by its name.
getAliasesByName(JsString) Get the aliases of a class by the class name
getByAlias(JsString) Get a reference to the class by its alias.
getClass(object) Get the class of the provided object; returns null if it's not an instance of any class created with Ext.define. This is usually invoked by the shorthand Ext.getClass
var component = new Ext.Component();
            Ext.ClassManager.getClass(component); // returns Ext.Component
getDisplayName(object) Returns the displayName property or className or object. When all else fails, returns "Anonymous".
getName(object) Get the name of the class by its reference or its instance; usually invoked by the shorthand Ext.getClassName
  Ext.ClassManager.getName(Ext.Action); // returns "Ext.Action"
getNameByAlias(JsString) Get the name of a class by its alias.
getNameByAlternate(JsString) Get the name of a class by its alternate name.
getNamesByExpression(JsString) Converts a string expression to an array of matching class names. An expression can either refers to class aliases or class names. Expressions support wildcards:
// returns ['Ext.window.Window']
           var window = Ext.ClassManager.getNamesByExpression('widget.window');
           // returns ['widget.panel', 'widget.window', ...]
           var allWidgets = Ext.ClassManager.getNamesByExpression('widget.*');
           // returns ['', '', ...]
           var allData = Ext.ClassManager.getNamesByExpression('*');
instantiateByAlias(JsString, object) Instantiate a class by its alias; usually invoked by the convenient shorthand Ext.createByAlias If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.
var window = Ext.ClassManager.instantiateByAlias('widget.window', { width: 600, height: 800, ... });
isCreated(JsString) Checks if a class has already been created.
set(JsString, object) Sets a name reference to a class.
setAlias(object, JsString) Register the alias for a class.
setNamespace(JsString, object) Creates a namespace and assign the value to the created object
  Ext.ClassManager.setNamespace('MyCompany.pkg.Example', someObject);
            alert(MyCompany.pkg.Example === someObject); // alerts true
© Copyright 2005-2011 SharpKit. All rights reserved.