/** * @author Jacky Nguyen <jacky@sencha.com> * @docauthor Jacky Nguyen <jacky@sencha.com> * @class Ext.Class * * Handles class creation throughout the whole framework. Note that most of the time {@link Ext#define 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. * * # Basic syntax: # * * Ext.define(className, properties); * * in which `properties` is an object represent a collection of properties that apply to the class. See * {@link Ext#define} 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 {@link 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 {@link Ext.Base#statics} and {@link Ext.Base#self} for more details on accessing * static properties within class methods * */ (function() { var ExtClass, Base = Ext.Base, baseStaticMembers = [], baseStaticMember, baseStaticMemberLength; for (baseStaticMember in Base) { if (Base.hasOwnProperty(baseStaticMember)) { baseStaticMembers.push(baseStaticMember); } } baseStaticMemberLength = baseStaticMembers.length; /** * @method constructor * Create a new anonymous class. * * @param {Object} data An object represent the properties of this class * @param {Function} onCreated Optional, the callback function to be executed when this class is fully created. * Note that the creation process can be asynchronous depending on the pre-processors used. * * @return {Ext.Base} The newly created class */ Ext.Class = ExtClass = function(Class, data, onCreated) { if (typeof Class != 'function') { onCreated = data; data = Class; Class = null; } if (!data) { data = {}; } Class = ExtClass.create(Class); ExtClass.process(Class, data, onCreated); return Class; }; Ext.apply(ExtClass, { /** * @private * @param Class * @param data * @param hooks */ onBeforeCreated: function(Class, data, hooks) { Class.addMembers(data); hooks.onCreated.call(Class, Class); }, /** * @private * @param Class * @param classData * @param onClassCreated */ create: function(Class) { var name, i; if (!Class) { Class = function() { return this.constructor.apply(this, arguments); }; } for (i = 0; i < baseStaticMemberLength; i++) { name = baseStaticMembers[i]; Class[name] = Base[name]; } return Class; }, /** * @private * @param Class * @param data * @param onCreated */ process: function(Class, data, onCreated) { var preprocessorStack = data.preprocessors || ExtClass.defaultPreprocessors, registeredPreprocessors = this.preprocessors, hooks = { onBeforeCreated: this.onBeforeCreated }, index = 0, preprocessors = [], preprocessor, preprocessorsProperties, i, ln, j, subLn, preprocessorProperty, process; delete data.preprocessors; for (i = 0,ln = preprocessorStack.length; i < ln; i++) { preprocessor = preprocessorStack[i]; if (typeof preprocessor == 'string') { preprocessor = registeredPreprocessors[preprocessor]; preprocessorsProperties = preprocessor.properties; if (preprocessorsProperties === true) { preprocessors.push(preprocessor.fn); } else if (preprocessorsProperties) { for (j = 0,subLn = preprocessorsProperties.length; j < subLn; j++) { preprocessorProperty = preprocessorsProperties[j]; if (data.hasOwnProperty(preprocessorProperty)) { preprocessors.push(preprocessor.fn); break; } } } } else { preprocessors.push(preprocessor); } } hooks.onCreated = onCreated ? onCreated : Ext.emptyFn; process = function(Class, data, hooks) { preprocessor = preprocessors[index++]; if (!preprocessor) { hooks.onBeforeCreated.apply(this, arguments); return; } if (preprocessor.call(this, Class, data, hooks, process) !== false) { process.apply(this, arguments); } }; process.call(this, Class, data, hooks); }, /** @private */ preprocessors: {}, /** * Register a new pre-processor to be used during the class creation process * * @member Ext.Class registerPreprocessor * @param {String} name The pre-processor's name * @param {Function} fn 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 {@link Ext.Class} constructor * - `{Function} fn`: The callback function that <b>must</b> to be executed when this pre-processor finishes, * regardless of whether the processing is synchronous or aynchronous * * @private * @return {Ext.Class} this * @markdown */ registerPreprocessor: function(name, fn, properties, position, relativeTo) { if (!position) { position = 'last'; } if (!properties) { properties = [name]; } this.preprocessors[name] = { name: name, properties: properties || false, fn: fn }; this.setDefaultPreprocessorPosition(name, position, relativeTo); return this; }, /** * Retrieve a pre-processor callback function by its name, which has been registered before * * @private * @param {String} name * @return {Function} preprocessor */ getPreprocessor: function(name) { return this.preprocessors[name]; }, /** * @private */ getPreprocessors: function() { return this.preprocessors; }, /** * @private */ defaultPreprocessors: [], /** * Retrieve the array stack of default pre-processors * @private * @return {Function} defaultPreprocessors */ getDefaultPreprocessors: function() { return this.defaultPreprocessors; }, /** * Set the default array stack of default pre-processors * * @private * @param {Array} preprocessors * @return {Ext.Class} this */ setDefaultPreprocessors: function(preprocessors) { this.defaultPreprocessors = Ext.Array.from(preprocessors); return this; }, /** * 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'); * @private * @param {String} name The pre-processor name. Note that it needs to be registered with * {@link Ext#registerPreprocessor registerPreprocessor} before this * @param {String} offset The insertion position. Four possible values are: * 'first', 'last', or: 'before', 'after' (relative to the name provided in the third argument) * @param {String} relativeName * @return {Ext.Class} this * @markdown */ setDefaultPreprocessorPosition: function(name, offset, relativeName) { var defaultPreprocessors = this.defaultPreprocessors, index; if (typeof offset == 'string') { if (offset === 'first') { defaultPreprocessors.unshift(name); return this; } else if (offset === 'last') { defaultPreprocessors.push(name); return this; } offset = (offset === 'after') ? 1 : -1; } index = Ext.Array.indexOf(defaultPreprocessors, relativeName); if (index !== -1) { Ext.Array.splice(defaultPreprocessors, Math.max(0, index + offset), 0, name); } return this; }, configNameCache: {}, getConfigNameMap: function(name) { var cache = this.configNameCache, map = cache[name], capitalizedName; if (!map) { capitalizedName = name.charAt(0).toUpperCase() + name.substr(1); map = cache[name] = { internal: '_' + name, initialized: '_is' + capitalizedName + 'Initialized', apply: 'apply' + capitalizedName, update: 'update' + capitalizedName, 'set': 'set' + capitalizedName, 'get': 'get' + capitalizedName, doSet : 'doSet' + capitalizedName, changeEvent: name.toLowerCase() + 'change' } } return map; } }); /** * @cfg {String} extend * The parent class that this class extends. For example: * * Ext.define('Person', { * say: function(text) { alert(text); } * }); * * Ext.define('Developer', { * extend: 'Person', * say: function(text) { this.callParent(["print "+text]); } * }); */ ExtClass.registerPreprocessor('extend', function(Class, data) { var Base = Ext.Base, basePrototype = Base.prototype, extend = data.extend, Parent, parentPrototype, i; delete data.extend; if (extend && extend !== Object) { Parent = extend; } else { Parent = Base; } parentPrototype = Parent.prototype; if (!Parent.$isClass) { for (i in basePrototype) { if (!parentPrototype[i]) { parentPrototype[i] = basePrototype[i]; } } } Class.extend(Parent); Class.triggerExtended.apply(Class, arguments); if (data.onClassExtended) { Class.onExtended(data.onClassExtended); delete data.onClassExtended; } }, true); //<feature classSystem.statics> /** * @cfg {Object} statics * List of static methods for this class. For example: * * 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'); */ ExtClass.registerPreprocessor('statics', function(Class, data) { Class.addStatics(data.statics); delete data.statics; }); //</feature> //<feature classSystem.inheritableStatics> /** * @cfg {Object} inheritableStatics * List of inheritable static methods for this class. * Otherwise just like {@link #statics} but subclasses inherit these methods. */ ExtClass.registerPreprocessor('inheritableStatics', function(Class, data) { Class.addInheritableStatics(data.inheritableStatics); delete data.inheritableStatics; }); //</feature> //<feature classSystem.config> /** * @cfg {Object} config * List of configuration options with their default values, for which automatically * accessor methods are generated. For example: * * Ext.define('SmartPhone', { * config: { * hasTouchScreen: false, * operatingSystem: 'Other', * price: 500 * }, * constructor: function(cfg) { * this.initConfig(cfg); * } * }); * * var iPhone = new SmartPhone({ * hasTouchScreen: true, * operatingSystem: 'iOS' * }); * * iPhone.getPrice(); // 500; * iPhone.getOperatingSystem(); // 'iOS' * iPhone.getHasTouchScreen(); // true; * iPhone.hasTouchScreen(); // true */ ExtClass.registerPreprocessor('config', function(Class, data) { var config = data.config, prototype = Class.prototype; delete data.config; Ext.Object.each(config, function(name, value) { var nameMap = ExtClass.getConfigNameMap(name), internalName = nameMap.internal, initializedName = nameMap.initialized, applyName = nameMap.apply, updateName = nameMap.update, setName = nameMap.set, getName = nameMap.get, hasOwnSetter = (setName in prototype) || data.hasOwnProperty(setName), hasOwnApplier = (applyName in prototype) || data.hasOwnProperty(applyName), hasOwnUpdater = (updateName in prototype) || data.hasOwnProperty(updateName), optimizedGetter, customGetter; if (value === null || (!hasOwnSetter && !hasOwnApplier && !hasOwnUpdater)) { prototype[internalName] = value; prototype[initializedName] = true; } else { prototype[initializedName] = false; } if (!hasOwnSetter) { data[setName] = function(value) { var oldValue = this[internalName], applier = this[applyName], updater = this[updateName]; if (!this[initializedName]) { this[initializedName] = true; } if (applier) { value = applier.call(this, value, oldValue); } if (typeof value != 'undefined') { this[internalName] = value; if (updater && value !== oldValue) { updater.call(this, value, oldValue); } } return this; } } if (!(getName in prototype) || data.hasOwnProperty(getName)) { customGetter = data[getName] || false; if (customGetter) { optimizedGetter = function() { return customGetter.apply(this, arguments); }; } else { optimizedGetter = function() { return this[internalName]; }; } data[getName] = function() { var currentGetter; if (!this[initializedName]) { this[initializedName] = true; this[setName](this.config[name]); } currentGetter = this[getName]; if ('$previous' in currentGetter) { currentGetter.$previous = optimizedGetter; } else { this[getName] = optimizedGetter; } return optimizedGetter.apply(this, arguments); }; } }); Class.addConfig(config, true); }); //</feature> //<feature classSystem.mixins> /** * @cfg {Object} mixins * List of classes to mix into this class. For example: * * Ext.define('CanSing', { * sing: function() { * alert("I'm on the highway to hell...") * } * }); * * Ext.define('Musician', { * extend: 'Person', * * mixins: { * canSing: 'CanSing' * } * }) */ ExtClass.registerPreprocessor('mixins', function(Class, data, hooks) { var mixins = data.mixins, name, mixin, i, ln; delete data.mixins; Ext.Function.interceptBefore(hooks, 'onCreated', function() { if (mixins instanceof Array) { for (i = 0,ln = mixins.length; i < ln; i++) { mixin = mixins[i]; name = mixin.prototype.mixinId || mixin.$className; Class.mixin(name, mixin); } } else { for (name in mixins) { if (mixins.hasOwnProperty(name)) { Class.mixin(name, mixins[name]); } } } }); }); //</feature> //<feature classSystem.backwardsCompatible> // Backwards compatible Ext.extend = function(Class, Parent, members) { if (arguments.length === 2 && Ext.isObject(Parent)) { members = Parent; Parent = Class; Class = null; } var cls; if (!Parent) { throw new Error("[Ext.extend] Attempting to extend from a class which has not been loaded on the page."); } members.extend = Parent; members.preprocessors = [ 'extend' //<feature classSystem.statics> ,'statics' //</feature> //<feature classSystem.inheritableStatics> ,'inheritableStatics' //</feature> //<feature classSystem.mixins> ,'mixins' //</feature> //<feature classSystem.config> ,'config' //</feature> ]; if (Class) { cls = new ExtClass(Class, members); } else { cls = new ExtClass(members); } cls.prototype.override = function(o) { for (var m in o) { if (o.hasOwnProperty(m)) { this[m] = o[m]; } } }; return cls; }; //</feature> })();