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.
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.
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
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");
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'
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
Retrieve the array stack of default pre-processors
Retrieve the array stack of default pre-processors
defaultPreprocessors
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
preprocessor
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
The pre-processor's name
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 aynchronousthis
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');
The pre-processor name. Note that it needs to be registered with registerPreprocessor before this
The insertion position. Four possible values are: 'first', 'last', or: 'before', 'after' (relative to the name provided in the third argument)
this