Sencha / ExtJS : Object Oriented JavaScript

Sencha [ExtJS]: Object Oriented JavaScriptRohan Chandanewww.slideshare.net/rohan.chandane

NamespaceClassConstructorPropertiesMethods/ FunctionsObjectInheritanceObject Oriented Approach

Defining a namespace in Sencha (ExtJS) classgives unique name for the JavaScript Classhelps in organizing JavaScript codedeclaring namespace in ExtJS/ SenchaegExt.ns("com.company.app");Namespace

Two ways to write custom class in ExtJS1st wayClassExt.ns("com.company.app");(function(){ // class definition var JSClass = Ext.extend(Object,{ . . })// end of class definition com.company.app.JSClass = JSClass;})();

2nd wayContinued.. var com.company.app.JSClass = Ext.extend(Object,{ . . })// end of class definition

ConstructorExt.ns("com.company.app");(function(){ varJSClass = Ext.extend(Object,{ //constructor function, this function will get //execute when object is created for the class constructor: function(config){ //console.log("JSClass constructor"); Ext.apply(this, config) } . . }) com.company.app.JSClass = JSClass ;})();

Constructor, function, attributeExt.ns("com.company.app");(function(){ var JSClass = Ext.extend(Object,{ //constructor function constructor: function(config){ //console.log("constructor called" ); Ext.apply(this, config) }, // attribute color: 'red', // some function moveBlock: function(newX, newY, myDiv1){ Ext.get(myDiv1).moveTo(newX, newY, true); } . }) com.company.app.JSClass = JSClass;})();

Create Object & Call a function// it need to include file JSClass.js in HTML, if it's // calling from HTML// create a object of the classvarobj = new com.company.app.JSClass();obj.moveBlock('0','-250','searchDiv');

InheritanceExt.ns("com.company.app");(function(){ varNewJSClass = Ext.extend(com.company.app.JSClass,{ . . . }) com.company.app.NewJSClass = NewJSClass;})();

Using extended classExt.ns("com.company.app");(function(){ varNewJSClass = Ext.extend(com.company.app.JSClass ,{ color: 'blue', constructor: function(config){ JSClass.superclass.constructor.apply(this, arguments) }, // method override moveBlock: function(newY, myDiv1){ Ext.get(myDiv1).moveTo(0, newY, true); } }) com.company.app.NewJSClass = NewJSClass;})();

Module Pattern: POJO like classExt.ns("com.company.app");(function(){ var JSClass = Ext.extend(Object,{ //constructor function constructor: function(config){ Ext.apply(this, config) } // class variable ,value1: null ,value2: null // getter, setter ,getValue1:function(){ return value1; } ,setValue1: function(val){ this.value1 = val; } }) com.company.app.JSClass = JSClass;})();

Ext.apply simply copies data members from a source object to a destination object and allows you to provide default valuesDefaults are optional, when there is defaults it does thisRun the next example in firebug, to understand it quicklyExt.apply()Syntax:Ext.apply(receivingObject, sendingObject, defaults)Ext.apply(receivingObject, defaults);Ext.apply(receivingObject, sendingObject);

Continued..var obj1 = {firstName: 'Rohan', lastName: 'Chandane'}console.log(obj1)//{firstName: 'Rohan', lastName: 'Chandane'}var obj2 = {job:'Dev', lang:'JavaScript', c: function(){}}console.log(obj2)// {job:'Dev', lang:'JavaScript' c: function(){}}var obj3 = Ext.apply(obj2, obj1, {newVar: 'new value'})console.log(obj3)// {firstName: 'Rohan', lastName: 'Chandane', job:'Dev', lang:'JavaScript' c: function(){}, newVar: 'new value'}// replacing job value herevar obj3 = Ext.apply(obj2, obj1, {job: 'new value'})console.log(obj3)// {firstName: 'Rohan', lastName: 'Chandane', job:'new value', lang:'JavaScript' c: function(){}}

Then what is the difference between Ext.apply() and Ext.extend()Ext.extend will inherit a superclass's data members and methods as well as add a superclass property and an override method.Ext.apply simply copies data membersContinued..

Modifying constructor in Module pattern to check Ext.apply()Adding console.log in JSClassto print configCreate object of JSClassclassContinued..constructor: function(config){Ext.apply(this, config); console.log(this.newVar)}// creating object of JSClass (Module Pattern)var config = {varnewVar = “Rohan”}varnewObj = com.company.app.JSClass(config);// Rohan

JavaScript is dynamic object oriented languageProperties and Function can be added and removed at run timeFunction can be moved from one object to anotherExample:Continued..varobj = new Object();propertyName="firstName";propertyValue="Rohan";console.log(obj.firstName);// undefinedeval("obj ."+propertyName+"='"+propertyValue+"'");console.log(obj.firstName);// Rohandelete (obj.firstName)console.log(obj.firstName)// undefined

Ajax application can be divided in two partAjax DeluxeApplications feel similar to a desktop appIts fully Ajax + JavaScript driven applicationScalable and for big applications Ajax LiteApplication/website feels more like a conventional web appAjax is used for small operations like validation with serverUseful only for small, quick functionalityWeb 2 App types

Here, lets take a look at Ajax Deluxe first Continued..

Project structureAppName||_lib| |_com| | |_company| | |_myapp| | |_package1| | |_Main.js | | |_package2| |_ext| |_(Extracted ExtJS lib & folders)| |_(...)||_assets| |_css| |_img||_Index.html

Index.htmlVersion 1:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Basic Setup</title>  <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/> <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="lib/ext/ext-all.js"></script>  <script type="text/javascript"> Ext.onReady(function(){ // Mandatory: need to add this spacer Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif'; // alert message box to check if ExtJS loaded Ext.MessageBox.alert("Hello Example","Hello, Rohan! ExtJS loaded successfully!"); }); </script> </head> <body></body></html>

Index.htmlVersion 2:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Basic Setup</title>  <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/> <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="lib/ext/ext-all.js"></script>  <script type="text/javascript" src="lib/com/company/myapp/package1/Main.js "> </script> </head> <body></body></html>

Main.js Version 2:Ext.onReady(function(){ // Mandatory: need to add this spacer /*[relative path to..]*/ Ext.BLANK_IMAGE_URL = ‘lib/ext/resources/images/default/s.gif'; Ext.QuickTips.init(); // alert message box to check if ExtJS loaded Ext.MessageBox.alert("Hello Example","Hello, Rohan! ExtJS loaded successfully!");});

Now, for creating a Ajax Deluxe App from our existing setupIt needs to use Border Layout (Viewport)We will edit Main.js and will add Ext.Viewport()As border layout has north, south, west, east & center region, We will add those using Ext.Panel()So Main.js will look like this -Continued..

Main.js with Ext.Viewport()Ext.onReady(function(){ // Mandatory: need to add this spacer /*[relative path to..]*/Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';Ext.QuickTips.init(); // viewport panels varnorthPanel = new Ext.Panel({ id: 'north-panel', height : 50,region: 'north', border: false, title:'Top Panel'});varsouthPanel = new Ext.Panel({ id: 'south-panel', height : 200, region: 'south', title : 'South Panel', collapsible: true, collapsed: true});varwestPanel = new Ext.Panel({ id: 'west-panel', layout: 'fit', width: 250, region: 'west', title: 'Navigation', collapsible: true });varcenterPanel = new Ext.Panel({ region: 'center' ,layout: 'fit', title: 'Content Panel' });// viewportnew Ext.Viewport({id: 'id-viewport' ,layout : 'border' ,items : [northPanel,southPanel,westPanel,centerPanel]});});

Here is object oriented programming with JavaScriptWe will create View, ViewLayout.js Class, which will render this Border Layout.We will modify Main.js and will create ViewLayout.js in directory package2Add entry in Index.html for ViewLayout.js, Main.jsOO

Index.html<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Basic Setup</title>  <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/> <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="lib/ext/ext-all.js"></script> <script type="text/javascript" src="lib/com/company/hello/package2/Main.js"></script> <script type="text/javascript" src="lib/com/company/hello/package2/ViewLayout.js"> </script></head>

ViewLayout.jsExt.ns("com.company.hello.package2");(function(){varViewLayout = Ext.extend(Object,{ constructor: function(config){Ext.apply(this, config); }, // creating page layout, code goes here /* public */ createLayout: function(){ // viewport panels varnorthPanel = new Ext.Panel({ id: 'north-panel', height : 50,region: 'north', border: false, title:‘ Top Panel'});varsouthPanel = new Ext.Panel({ id: 'south-panel', height : 200, region: 'south', title : 'South Panel', collapsible: true, collapsed: true });varwestPanel = new Ext.Panel({ id: 'west-panel', layout: 'fit', width: 250, region: 'west', title: 'Navigation', collapsible: true });varcenterPanel = new Ext.Panel({ region: 'center' ,layout: 'fit', title: 'Content Panel'});code continues..

Continued.. // viewport new Ext.Viewport({ id: 'id-viewport' ,layout : 'border' ,items : [northPanel, southPanel, westPanel, centerPanel] });} }); com.company.hello.package2.ViewLayout = ViewLayout;})();

Main.jsExt.onReady(function(){ // Mandatory: need to add this spacer /*[relative path to..]*/Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';Ext.QuickTips.init(); // main execution start here, user defined functionvaronModuleLoad = function(){varviewLayout = new com.company.hello.package2.ViewLayout();viewLayout.createLayout(); } // main starting pointonModuleLoad();});

SingletonExt.ns("com.netapp.hello.package1"); (function() {varSingletonModel = Ext.extend(Object, { _instance : null ,constructor : function() { console.log("Singleton constructor called : " + this.getInstance()); } ,getInstance : function() { if (this._instance === null) {this._instance = this.createInstance(); } return this._instance; } ,createInstance : function() { return 10; } }); com.netapp.hello.package1.SingletonModel = SingletonModel;})()

ModuleExt.ns("com.netapp.hello.package1"); (function(){varModulePattern = Ext.extend(Object,{name:"Rohan" ,constructor:function(){ console.log("constrcutor"); },getName:function(){ this.name; },setName:function(val){ this.name = val; } }); com.netapp.hello.package2.ModulePattern = ModulePattern;})()

Use reusable code Object Oriented Approach Modularize codeDo not access DOM frequentlyIts computational heavy codeUse Lazy loading, wherever possibleBut avoid heavy nesting Use of event delegationEvents should be assigned to a smaller subset of the document/element, rather than each individual element, this uses JavaScript’s event bubbling notion. this approach takes less memory in browserContinued..

Use of JavaScript minification, obfuscaterYUI compressor, Linters (jsonlint.com, jslint.com)Use of efficient programming practices in JavaScript Example: String manipulation - instead of string concatenation using ‘+’ operator, use of array’s .join() function, this way it will be better garbage collected.Cross Browser Scripting: using web standards, feature detection techniques instead browser detection technique and browser specific codeRemove listeners which are not in use anymoreContinued..

Loops are heavy, it can be optimized by using simple techniquesIn for loop, whenever reading length of array, store it in some variable instead of reading it again and again using array.lengthAvoid creating lot of HTML code with JavaScriptContinued..

I will update these notes periodically with my experiments, stay tuned..Note

Referenceshttp://www.jslog.comhttp://ajaxpatterns.orghttp://www.sencha.com/forum/http://edspencer.nethttp://code.google.com/p/v8/http://www.cherny.com/

Sencha / ExtJS : Object Oriented JavaScript

More Related Content

What's hot (20)

Similar to Sencha / ExtJS : Object Oriented JavaScript (20)

More from Rohan Chandane (13)

Recently uploaded (20)

Sencha / ExtJS : Object Oriented JavaScript