Ext JS Classes By Aaron Conran Creating Classes

Ext. JS Classes By Aaron Conran

Creating Classes • Creating classes in Java. Script is easy as creating a constructor function and using the new keyword when creating an instance of that class. Person Class: var Person = function(config) { Ext. apply(this, config); }; Using the Person class: var me = new Person({f. Name: ‘Aaron’, l. Name: ‘Conran’, dob: ’ 03/23/1984’});

Ext. apply • Ext. apply copies all attributes of one object to another. • Ext. apply is often used at the beginning of constructors to copy configuration arguments to the this scope. • The new keyword creates a new blank object in the scope of this. • You can also supply a 3 rd argument as a default configuration. Ex: Ext. apply(this, config); // with defaults var def. Config = {test: ‘abc’}; Ext. apply(this, config, def. Config);

Ext. apply. If • Ext. apply. If works similarly to Ext. apply except if properties already exist they won’t be overwritten. • Ex: var point = point || {}; var default = {x: 0, y: 0}; Ext. apply. If(point, default);

Ext. extend • Ext. extend is used to extend or inherit from classes which already exist. • Generic Pattern: var Sub. Class = function() { Sub. Class. superclass. constructor. call(this); }; Ext. extend(Sub. Class, Base. Class, { new. Method : function() {}, overridden. Method : function() {} }; • Sub. Class extends Base. Class and overrides overriden. Method and adds new. Method.

superclass. constructor • The superclass. constructor property points to our base (or super) class constructor. • We use the Java. Script call method to run the constructor in the scope of this. • this will always be our first argument of call. Other arguments will be passed to our base constructor: • Ex: Base. Class. superclass. constructor. call(this, config);

Extending an Ext Class • Extending and Customizing Ext classes is easy • Goal: Create a extension of Basic. Dialog – New class Default. Dialog which extends from Basic. Dialog – Provide a set of defaults for dialogs • modal, width, height, shadow, draggable, etc – No need to add/override methods to Basic. Dialog

Extending an Ext class var Default. Dialog = function(config) { var config = config || {}; // default config to blank object var def. Config = {title: 'Default', // provide a default config height: 130, width: 250, shadow: true, modal: true, draggable: true, fixedcenter: true, collapsible: false, closable: true, resizable: false}; Ext. apply. If(config, def. Config); // apply def. Config IF config does not have property var el = Ext. Dom. Helper. append(document. body, {tag: 'div'}); // create el Default. Dialog. superclass. constructor. call(this, el, config); // run superclass }; Ext. extend(Default. Dialog, Ext. Basic. Dialog); // Default. Dialog extends Ext. Basic. Dialog

Default. Dialog example • We can now re-use the Default. Dialog class • By passing configuration options we can override the defaults • By omitting the configuration, we assume the defaults dlg = new Default. Dialog({title: 'First Dialog', width: 300}); dlg. show(); dlg 2 = new Default. Dialog(); dlg 2. show();