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
+