Sencha [ExtJS]: Object Oriented JavaScript<br />Rohan Chandane<br />www.slideshare.net/rohan.chandane<br />
Namespace<br />Class<br />Constructor<br />Properties<br />Methods/ Functions<br />Object<br />Inheritance<br />Object Ori...
Defining a namespace in Sencha (ExtJS) class<br />gives unique name for the JavaScript Class<br />helps in organizing Java...
Two ways to write custom class in ExtJS<br />1st way<br />Class<br />Ext.ns("com.company.app");<br />(function(){<br />   ...
2nd way<br />Continued.. <br />var com.company.app.JSClass = Ext.extend(Object,{<br />    .<br />    .<br /> })// end of c...
Constructor<br />Ext.ns("com.company.app");<br />(function(){<br />    varJSClass = Ext.extend(Object,{<br />        //con...
Constructor, function, attribute<br />Ext.ns("com.company.app");<br />(function(){<br />    var JSClass = Ext.extend(Objec...
Create Object & Call a function<br />// it need to include file JSClass.js in HTML, if it's <br />// calling from HTML<br ...
Inheritance<br />Ext.ns("com.company.app");(function(){<br />    varNewJSClass = Ext.extend(com.company.app.JSClass,{<br /...
Using extended class<br />Ext.ns("com.company.app");(function(){<br />    varNewJSClass = Ext.extend(com.company.app.JSCla...
Module Pattern: POJO like class<br />Ext.ns("com.company.app");<br />(function(){<br />    var JSClass = Ext.extend(Object...
Ext.apply simply copies data members from a source object to a destination object and allows you to provide default values...
Continued..<br />var obj1 = {firstName: 'Rohan', lastName: 'Chandane'}<br />console.log(obj1)<br />//{firstName: 'Rohan', ...
Then what is the difference between Ext.apply() and Ext.extend()<br />Ext.extend will inherit a superclass's data members ...
Modifying constructor in Module pattern to check Ext.apply()<br />Adding console.log in JSClassto print config<br />Create...
Extras of OO JavaScript<br />
JavaScript is dynamic object oriented language<br />Properties and Function can be added and removed at run time<br />Func...
Basic Project Setup <br />
Ajax application can be divided in two part<br />Ajax Deluxe<br />Applications feel similar to a desktop app<br />Its full...
Here, lets take a look at Ajax Deluxe first <br />Continued..<br />
Project structure<br />AppName<br />|<br />|_lib<br />|   |_com<br />|   |   |_company<br />|   |       |_myapp<br />|   |...
Index.html<br />Version 1:<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />"http://www.w3.org/TR/...
Index.html<br />Version 2:<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />"http://www.w3.org/TR/...
Main.js <br />Version 2:<br />Ext.onReady(function(){<br />    // Mandatory: need to add this spacer /*[relative path to.....
Now, for creating a Ajax Deluxe App from our existing setup<br />It needs to use Border Layout (Viewport)<br />We will edi...
Main.js with Ext.Viewport()<br />Ext.onReady(function(){<br />    // Mandatory: need to add this spacer /*[relative path t...
Preview: using Viewport<br />
Here is object oriented programming with JavaScript<br />We will create View, ViewLayout.js Class, which will render this ...
Index.html<br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />    <title>Basic...
ViewLayout.js<br />Ext.ns("com.company.hello.package2");<br />(function(){<br />varViewLayout = Ext.extend(Object,{<br /> ...
Continued..<br />        // viewport<br />        new Ext.Viewport({<br />            id: 'id-viewport'<br />            ,...
Main.js<br />Ext.onReady(function(){<br />    // Mandatory: need to add this spacer /*[relative path to..]*/<br />Ext.BLAN...
Preview: using OO, ViewPort<br />
Performance with ExtJS<br />
Use reusable code <br />Object Oriented Approach <br />Modularize code<br />Do not access DOM frequently<br />Use Lazy loa...
Use of JavaScript minification, obfuscater<br />YUI compressor, Linters  (jsonlint.com, jslint.com)<br />Use of efficient ...
I will update these notes periodically with my experiments, <br />stay tuned..<br />Note<br />
References<br />http://www.jslog.com<br />http://ajaxpatterns.org<br />http://www.sencha.com/forum/<br />http://edspencer....
Sencha / ExtJS : Object Oriented JavaScript
Sencha / ExtJS : Object Oriented JavaScript
Sencha / ExtJS : Object Oriented JavaScript
Sencha / ExtJS : Object Oriented JavaScript
Upcoming SlideShare
Loading in...5
×

Sencha / ExtJS : Object Oriented JavaScript

25,144
-1

Published on

Sencha:
Object Oriented JavaScript with ExtJS JavaScript Library and its implementation in application (Ajax Deluxe & Ajax Lite)

Published in: Education, Technology
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
25,144
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

Sencha / ExtJS : Object Oriented JavaScript

  1. 1. Sencha [ExtJS]: Object Oriented JavaScript<br />Rohan Chandane<br />www.slideshare.net/rohan.chandane<br />
  2. 2. Namespace<br />Class<br />Constructor<br />Properties<br />Methods/ Functions<br />Object<br />Inheritance<br />Object Oriented Approach <br />
  3. 3. Defining a namespace in Sencha (ExtJS) class<br />gives unique name for the JavaScript Class<br />helps in organizing JavaScript code<br />declaring namespace in ExtJS/ Senchaeg<br />Ext.ns("com.company.app");<br />Namespace<br />
  4. 4. Two ways to write custom class in ExtJS<br />1st way<br />Class<br />Ext.ns("com.company.app");<br />(function(){<br />   <br /> // class definition<br />    var JSClass = Ext.extend(Object,{<br />    .<br />    .<br />    })// end of class definition<br />     com.company.app.JSClass = JSClass;<br />})();<br />
  5. 5. 2nd way<br />Continued.. <br />var com.company.app.JSClass = Ext.extend(Object,{<br />    .<br />    .<br /> })// end of class definition<br />
  6. 6. Constructor<br />Ext.ns("com.company.app");<br />(function(){<br />    varJSClass = Ext.extend(Object,{<br />        //constructor function, this function will get //execute when object is created for the class<br />     constructor: function(config){<br />         //console.log("JSClassconstructor");<br />         Ext.apply(this, config)<br />     }<br />    .<br />    .<br />    })<br />    com.company.app.JSClass = JSClass ;<br />})();<br />
  7. 7. Constructor, function, attribute<br />Ext.ns("com.company.app");<br />(function(){<br />    var JSClass = Ext.extend(Object,{<br />        //constructor function<br />     constructor: function(config){<br />         //console.log("constructor called" );<br />        Ext.apply(this, config)<br />     },<br />     // attribute<br />     color: 'red',<br />     // some function    moveBlock: function(newX, newY, myDiv1){<br />        Ext.get(myDiv1).moveTo(newX, newY, true);<br /> }<br />     .<br />    })<br />    com.company.app.JSClass = JSClass;<br />})();<br />
  8. 8. Create Object & Call a function<br />// it need to include file JSClass.js in HTML, if it's <br />// calling from HTML<br />// create a object of the class<br />varobj = new com.company.app.JSClass();<br />obj.moveBlock('0','-250','searchDiv');<br />
  9. 9. Inheritance<br />Ext.ns("com.company.app");(function(){<br />    varNewJSClass = Ext.extend(com.company.app.JSClass,{<br />    .<br />    .<br />    .<br />    })    com.company.app.NewJSClass = NewJSClass;<br />})();<br />
  10. 10. Using extended class<br />Ext.ns("com.company.app");(function(){<br />    varNewJSClass = Ext.extend(com.company.app.JSClass ,{<br />        color: 'blue',<br />        constructor: function(config){            JSClass.superclass.constructor.apply(this, arguments)        },<br />        // method override<br />        moveBlock: function(newY, myDiv1){<br />            Ext.get(myDiv1).moveTo(0, newY, true);<br />        }<br />    })    com.company.app.NewJSClass = NewJSClass;<br />})();<br />
  11. 11. Module Pattern: POJO like class<br />Ext.ns("com.company.app");<br />(function(){<br />    var JSClass = Ext.extend(Object,{<br />        //constructor function<br />    constructor: function(config){<br />        Ext.apply(this, config)<br />    }<br />    // class variable<br />    ,value1: null<br />    ,value2: null<br />     // getter, setter<br />    ,getValue1:function(){<br />     return value1;<br />    }    ,setValue1: function(val){<br />     this.value1 = val;<br />    }  <br />    <br />    })    com.company.app.JSClass = JSClass;<br />})();<br />
  12. 12. Ext.apply simply copies data members from a source object to a destination object and allows you to provide default values<br />Defaults are optional, when there is defaults it does this<br />Run the next example in firebug, to understand it quickly<br />Ext.apply()<br />Syntax:<br />Ext.apply(receivingObject, sendingObject, defaults)<br />Ext.apply(receivingObject, defaults);<br />Ext.apply(receivingObject, sendingObject);<br />
  13. 13. Continued..<br />var obj1 = {firstName: 'Rohan', lastName: 'Chandane'}<br />console.log(obj1)<br />//{firstName: 'Rohan', lastName: 'Chandane'}<br />var obj2 = {job:'Dev', lang:'JavaScript', c: function(){}}<br />console.log(obj2)<br />// {job:'Dev', lang:'JavaScript' c: function(){}}<br />var obj3 = Ext.apply(obj2, obj1, {newVar: 'new value'})<br />console.log(obj3)<br />// {firstName: 'Rohan', lastName: 'Chandane', job:'Dev', lang:'JavaScript' c: function(){}, newVar: 'new value'}<br />// replacing job value here<br />var obj3 = Ext.apply(obj2, obj1, {job: 'new value'})<br />console.log(obj3)<br />// {firstName: 'Rohan', lastName: 'Chandane', job:'new value', lang:'JavaScript' c: function(){}}<br />
  14. 14. Then what is the difference between Ext.apply() and Ext.extend()<br />Ext.extend will inherit a superclass's data members and methods as well as add a superclass property and an override method.<br />Ext.apply simply copies data members<br />Continued..<br />
  15. 15. Modifying constructor in Module pattern to check Ext.apply()<br />Adding console.log in JSClassto print config<br />Create object of JSClassclass<br />constructor: function(config){<br />Ext.apply(this, config);<br />console.log(this.newVar)<br />}<br />// creating object of JSClass(Module Pattern)<br />var config = {<br />varnewVar = “Rohan”<br />}<br />varnewObj = com.company.app.JSClass(config);<br />// Rohan <br />
  16. 16. Extras of OO JavaScript<br />
  17. 17. JavaScript is dynamic object oriented language<br />Properties and Function can be added and removed at run time<br />Function can be moved from one object to another<br />Example:<br />Continued..<br />varobj = new Object();propertyName="firstName";propertyValue="Rohan";<br />console.log(obj.firstName);// undefinedeval("obj ."+propertyName+"='"+propertyValue+"'");console.log(obj.firstName);// Rohan<br />delete (obj.firstName)console.log(obj.firstName)// undefined<br />
  18. 18. Basic Project Setup <br />
  19. 19. Ajax application can be divided in two part<br />Ajax Deluxe<br />Applications feel similar to a desktop app<br />Its fully Ajax + JavaScript driven application<br />Scalable and for big applications <br />Ajax Lite<br />Application/website feels more like a conventional web app<br />Ajax is used for small operations like validation with server<br />Useful only for small, quick functionality<br />Web 2 App types<br />
  20. 20. Here, lets take a look at Ajax Deluxe first <br />Continued..<br />
  21. 21. Project structure<br />AppName<br />|<br />|_lib<br />|   |_com<br />|   |   |_company<br />|   |       |_myapp<br />|   |            |_package1<br />|   |                |_Main.js <br />|   |            |_package2<br />|   |_ext<br />|       |_(Extracted ExtJS lib & folders)<br />|       |_(...)<br />||_assets<br />|   |_css<br />|   |_img|<br />|_Index.html<br />
  22. 22. Index.html<br />Version 1:<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />"http://www.w3.org/TR/html4/loose.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br />    <head><br />      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />    <title>Basic Setup</title><br />    <!-- Bring in the ExtJs Libraries and CSS --><br />    <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/><br />    <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script><br />    <script type="text/javascript" src="lib/ext/ext-all.js"></script><br />   <br />       <!-- Place the page specific js here --><br />       <script type="text/javascript"><br />             Ext.onReady(function(){<br />            // Mandatory: need to add this spacer<br />            Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';<br />            // alert message box to check if ExtJS loaded<br />            Ext.MessageBox.alert("Hello Example","Hello, Rohan! ExtJS loaded successfully!");<br />        });<br />     </script><br />    <br />    </head><br />    <body></body><br /></html><br />
  23. 23. Index.html<br />Version 2:<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />"http://www.w3.org/TR/html4/loose.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br />    <head><br />      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />    <title>Basic Setup</title><br />    <!-- Bring in the ExtJs Libraries and CSS --><br />    <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/><br />    <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script><br />    <script type="text/javascript" src="lib/ext/ext-all.js"></script><br />   <br />       <!-- Place the page specific js here --><br />    <script type="text/javascript" src="lib/com/company/myapp/package1/Main.js "> </script><br />    <br />    </head><br />    <body></body><br /></html><br />
  24. 24. Main.js <br />Version 2:<br />Ext.onReady(function(){<br />    // Mandatory: need to add this spacer /*[relative path to..]*/<br />    Ext.BLANK_IMAGE_URL = ‘lib/ext/resources/images/default/s.gif';<br />    Ext.QuickTips.init();<br />    // alert message box to check if ExtJS loaded<br />    Ext.MessageBox.alert("Hello Example","Hello, Rohan! ExtJS loaded successfully!");<br />});<br />
  25. 25. Now, for creating a Ajax Deluxe App from our existing setup<br />It needs to use Border Layout (Viewport)<br />We will edit Main.js and will add Ext.Viewport()<br />As Viewport has north, south, west, east & center region, We will add those using Ext.Panel()<br />So Main.js will look like this -<br />Continued..<br />
  26. 26. Main.js with Ext.Viewport()<br />Ext.onReady(function(){<br /> // Mandatory: need to add this spacer /*[relative path to..]*/<br />Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';<br />Ext.QuickTips.init();<br /> // viewport panels <br />varnorthPanel = new Ext.Panel({<br /> id: 'north-panel', height : 50,region: 'north', border: false, title:'Top Panel'<br />});<br />varsouthPanel = new Ext.Panel({<br /> id: 'south-panel', height : 200, region: 'south', title : 'South Panel', collapsible: true, collapsed: true<br />});<br />varwestPanel = new Ext.Panel({<br /> id: 'west-panel', layout: 'fit', width: 250, region: 'west', title: 'Navigation', collapsible: true<br /> });<br />varcenterPanel = new Ext.Panel({<br /> region: 'center' ,layout: 'fit', title: 'Content Panel'<br /> });<br />// viewport<br />new Ext.Viewport({<br />id: 'id-viewport'<br /> ,layout : 'border'<br /> ,items : [northPanel,southPanel,westPanel,centerPanel]<br />});<br />});<br />
  27. 27. Preview: using Viewport<br />
  28. 28. Here is object oriented programming with JavaScript<br />We will create View, ViewLayout.js Class, which will render this Border Layout.<br />We will modify Main.js and will create ViewLayout.js in directory package2<br />Add entry in Index.html for ViewLayout.js, Main.js<br />OO<br />
  29. 29. Index.html<br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br /> <title>Basic Setup</title><br /> <!-- Bring in the ExtJs Libraries and CSS --><br /> <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/><br /> <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script><br /> <script type="text/javascript" src="lib/ext/ext-all.js"></script><br /> <!-- Place the page specific js here --><br /><script type="text/javascript" src="lib/com/company/hello/package2/Main.js"></script><br /> <script type="text/javascript" src="lib/com/company/hello/package2/ViewLayout.js"> </script><br /></head><br />
  30. 30. ViewLayout.js<br />Ext.ns("com.company.hello.package2");<br />(function(){<br />varViewLayout = Ext.extend(Object,{<br /> constructor: function(config){<br />Ext.apply(this, config);<br /> },<br /> // creating page layout, code goes here<br /> /* public */ createLayout: function(){<br /> // viewport panels <br />varnorthPanel = new Ext.Panel({<br />id: 'north-panel', height : 50,region: 'north', border: false, title:‘ Top Panel'<br />});<br />varsouthPanel = new Ext.Panel({<br />id: 'south-panel', height : 200, region: 'south', title : 'South Panel', collapsible: true, collapsed: true<br />});<br />varwestPanel = new Ext.Panel({<br />id: 'west-panel', layout: 'fit', width: 250, region: 'west', title: 'Navigation', collapsible: true<br />});<br />varcenterPanel = new Ext.Panel({<br />region: 'center' ,layout: 'fit', title: 'Content Panel'<br />});<br />code continues..<br />
  31. 31. Continued..<br /> // viewport<br /> new Ext.Viewport({<br /> id: 'id-viewport'<br /> ,layout : 'border'<br /> ,items : [northPanel, southPanel, westPanel, centerPanel]<br /> });<br />}<br /> });<br /> com.company.hello.package2.ViewLayout = ViewLayout;<br />})();<br />
  32. 32. Main.js<br />Ext.onReady(function(){<br /> // Mandatory: need to add this spacer /*[relative path to..]*/<br />Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';<br />Ext.QuickTips.init();<br /> // main execution start here, user defined function<br />varonModuleLoad = function(){<br />varviewLayout = new com.company.hello.package2.ViewLayout();<br />viewLayout.createLayout(); <br /> }<br /> // main starting point<br />onModuleLoad();<br />});<br />
  33. 33. Preview: using OO, ViewPort<br />
  34. 34. Performance with ExtJS<br />
  35. 35. Use reusable code <br />Object Oriented Approach <br />Modularize code<br />Do not access DOM frequently<br />Use Lazy loading, wherever possible<br />But stop nesting too much <br />Use of event delegation<br />Events are assigned to a smaller subset of the document, rather than each individual element, this uses JavaScript’s event bubbling notion.  this approach takes less memory in browser<br />Continued..<br />
  36. 36. Use of JavaScript minification, obfuscater<br />YUI compressor, Linters  (jsonlint.com, jslint.com)<br />Use of efficient programming practices in JavaScript <br />Example: String manipulation - instead of string concatenation using ‘+’ operator, use of array’s .join() function, this way it will be better garbage collected.<br />Cross Browser Scripting: using web standards, feature detection techniques instead browser detection technique and browser specific code<br />Remove listeners which are not in use anymore<br />Continued..<br />
  37. 37. I will update these notes periodically with my experiments, <br />stay tuned..<br />Note<br />
  38. 38. References<br />http://www.jslog.com<br />http://ajaxpatterns.org<br />http://www.sencha.com/forum/<br />http://edspencer.net<br />http://code.google.com/p/v8/<br />http://www.cherny.com/<br />

×