Files
Guide
The Class SystemExt.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.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
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: {}
Methods
Adds a batch of class name to alias mappings
Parameters
- aliases : Object
The set of mappings of the form className : [values...]
Returns
- Ext.ClassManager
this
Parameters
- alternates : Object
The set of mappings of the form className : [values...]
Returns
- Ext.ClassManager
this
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
Parameters
- object : Object
Returns
- Ext.Class
class
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"
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.*');
Parameters
- expression : String
Returns
- Array
classNames
Fires
Instantiate a class by either full name, alias or alternate name; usually invoked by the convenient shorthand Ext.create.
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 formPanel = Ext.create('widget.formpanel', { width: 600, height: 800 });
// alternate name
var formPanel = Ext.create('Ext.form.FormPanel', { width: 600, height: 800 });
// full class name
var formPanel = Ext.create('Ext.form.Panel', { width: 600, height: 800 });
Parameters
- name : String
- args : Mixed
Additional arguments after the name will be passed to the class' constructor.
Returns
- Object
instance
Fires
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 });
Parameters
- alias : String
- args : Mixed...
Additional arguments after the alias will be passed to the class constructor.
Returns
- Object
instance
Fires
Register the alias for a class.
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
Fires
Insert this post-processor at a specific position in the stack, optionally relative to any existing post-processor
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.
Parameters
- postprocessors : String/Array
The name of a registered post processor or an array of registered names.
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
Parameters
- name : String
- value : Mixed