ExtJS Classes 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 3 rd 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 property var el = Ext.DomHelper.append(document.body, {tag: 'div'}); // create el DefaultDialog.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();