Ext.ClassManager
Files
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:
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) {
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
Available since: 4.0.0
Properties
All classes which were defined through the ClassManager. Keys are the name of the classes and the values are references to the classes.
Defaults to: {}
Available since: 4.0.0
Methods
Defines a class.
Ext.define and Ext.ClassManager.create are almost aliases of each other, with the only exception that Ext.define allows definition of overrides. To avoid trouble, always use Ext.define.
Ext.define('My.awesome.Class', {
someProperty: 'something',
someMethod: function() { ... }
...
}, function() {
alert('Created!');
alert(this === My.awesome.Class); // alerts true
var myInstance = new this();
});
Available since: 4.0.0
Parameters
- className : String
The class name to create in string dot-namespaced format, for example:
My.very.awesome.Class,FeedViewer.plugin.CoolPager. It is highly recommended to follow this simple convention:- The root and the class name are 'CamelCased'
- Everything else is lower-cased
- data : Object
The key-value pairs of properties to apply to this class. Property names can be of any valid strings, except those in the reserved list below:
- self
- alias
- alternateClassName
- config
- extend
- inheritableStatics
- mixins
- override (only when using Ext.define)
- requires
- singleton
- statics
- uses
- createdFn : Function (optional)
callback to execute after the class is created, the execution scope of which (
this) will be the newly created class itself.
Returns
The new Ext.ns, supports namespace rewriting
Available since: 4.0.0
Get the class of the provided object; returns null if it's not an instance of any class created with Ext.define.
var component = new Ext.Component();
Ext.ClassManager.getClass(component); // returns Ext.Component
Ext.getClass is alias for Ext.ClassManager.getClass.
Available since: 4.0.0
Parameters
- object : Object
Returns
- Ext.Class
class
Get the name of the class by its reference or its instance.
Ext.ClassManager.getName(Ext.Action); // returns "Ext.Action"
Ext.getClassName is alias for Ext.ClassManager.getName.
Available since: 4.0.0
Parameters
Returns
- String
className
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 ['Ext.data.Store', 'Ext.data.ArrayProxy', ...]
var allData = Ext.ClassManager.getNamesByExpression('Ext.data.*');
Available since: 4.0.0
Parameters
- expression : String
Returns
- String[]
classNames
Instantiate a class by either full name, alias or alternate name.
If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.
For example, all these three lines return the same result:
// alias
var window = Ext.ClassManager.instantiate('widget.window', { width: 600, height: 800, ... });
// alternate name
var window = Ext.ClassManager.instantiate('Ext.Window', { width: 600, height: 800, ... });
// full class name
var window = Ext.ClassManager.instantiate('Ext.window.Window', { width: 600, height: 800, ... });
Ext.create is alias for Ext.ClassManager.instantiate.
Available since: 4.0.0
Parameters
- name : String
- args : Object...
Additional arguments after the name will be passed to the class' constructor.
Returns
- Object
instance
Instantiate a class by its alias.
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, ... });
Ext.createByAlias is alias for Ext.ClassManager.instantiateByAlias.
Available since: 4.0.0
Parameters
- alias : String
- args : Object...
Additional arguments after the alias will be passed to the class constructor.
Returns
- Object
instance
Register the alias for a class.
Available since: 4.0.0
Parameters
- cls : Ext.Class/String
a reference to a class or a className
- alias : String
Alias to use when referring to this class
Returns
- Ext.ClassManager
this
Insert this post-processor at a specific position in the stack, optionally relative to any existing post-processor
Available since: 4.0.0
Parameters
- name : String
The post-processor name. Note that it needs to be registered with registerPostprocessor 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.ClassManager
this
Set the default post processors array stack which are applied to every class.
Available since: 4.0.0
Parameters
Returns
- Ext.ClassManager
this
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
Available since: 4.0.0