ExtJSClasses

By Aaron Conran

Creating Classes

• Creating classes in JavaScript 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({fName: ‘Aaron’,lName: ‘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 3rd argument as a default

configuration.

Ex:

Ext.apply(this, config);

// with defaults

var defConfig = {test: ‘abc’};

Ext.apply(this, config, defConfig);

Ext.applyIf

• Ext.applyIf 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.applyIf(point, default);

Ext.extend

• Ext.extend is used to extend or inherit from classes which already exist.

• Generic Pattern:var SubClass = function() { SubClass.superclass.constructor.call(this);};Ext.extend(SubClass, BaseClass, { newMethod : function() {}, overriddenMethod : function() {}};

• SubClass extends BaseClass and overrides overridenMethod and adds newMethod.

superclass.constructor

• The superclass.constructor property points to our base (or super) class constructor.

• We use the JavaScript 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:BaseClass.superclass.constructor.call(this, config);

Extending an Ext Class

• Extending and Customizing Ext classes is easy

• Goal: Create a extension of BasicDialog– New class DefaultDialog which extends from

BasicDialog– Provide a set of defaults for dialogs

• modal, width, height, shadow, draggable, etc

– No need to add/override methods to BasicDialog

Extending an Ext class var DefaultDialog = function(config) {

var config = config || {}; // default config to blank object var defConfig = {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.applyIf(config, defConfig); // apply defConfig IF config does not have propertyvar el = Ext.DomHelper.append(document.body, {tag: 'div'}); // create elDefaultDialog.superclass.constructor.call(this, el, config); // run superclass

}; Ext.extend(DefaultDialog, Ext.BasicDialog); // DefaultDialog extends Ext.BasicDialog

DefaultDialog example

• We can now re-use the DefaultDialog class • By passing configuration options we can override the

defaults• By omitting the configuration, we assume the defaults

dlg = new DefaultDialog({title: 'First Dialog', width: 300});

dlg.show();

dlg2 = new DefaultDialog();

dlg2.show();