lara-morse
Uploaded by
9 SLIDES
205 VIEWS
90LIKES

Efficient JavaScript Class Creation Guide

DESCRIPTION

Learn how to create and extend classes in JavaScript using ExtJS by Aaron Conran. This guide covers creating classes, applying attributes, extending classes, and customizing Ext classes.

1 / 9

Download Presentation

Efficient JavaScript Class Creation Guide

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ExtJSClasses By Aaron Conran

  2. 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’});

  3. 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);

  4. 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);

  5. 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.

  6. 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);

  7. 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

  8. 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

  9. 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();

More Related