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

1. Sencha [ExtJS]: Object Oriented JavaScript Rohan Chandane www.slideshare.net/rohan.chandane

2. Namespace Class Constructor Properties Methods/ Functions Object Inheritance Object Oriented Approach

3. Defining a namespace in Sencha (ExtJS) class gives unique name for the JavaScript Class helps in organizing JavaScript code declaring namespace in ExtJS/ Senchaeg Ext.ns("com.company.app"); Namespace

4. Two ways to write custom class in ExtJS 1st way Class Ext.ns("com.company.app"); (function(){ // class definition var JSClass = Ext.extend(Object,{ . . })// end of class definition com.company.app.JSClass = JSClass; })();

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

6. Constructor Ext.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 ; })();

7. Constructor, function, attribute Ext.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; })();

8. 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 class varobj = new com.company.app.JSClass(); obj.moveBlock('0','-250','searchDiv');

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

10. Using extended class Ext.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; })();

11. Module Pattern: POJO like class Ext.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; })();

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

13. 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 here var obj3 = Ext.apply(obj2, obj1, {job: 'new value'}) console.log(obj3) // {firstName: 'Rohan', lastName: 'Chandane', job:'new value', lang:'JavaScript' c: function(){}}

14. 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 members Continued..

15. Modifying constructor in Module pattern to check Ext.apply() Adding console.log in JSClassto print config Create object of JSClassclass Continued.. 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

16. Extras of OO JavaScript

17. JavaScript is dynamic object oriented language Properties and Function can be added and removed at run time Function can be moved from one object to another Example: Continued.. varobj = new Object();propertyName="firstName";propertyValue="Rohan"; console.log(obj.firstName);// undefinedeval("obj ."+propertyName+"='"+propertyValue+"'");console.log(obj.firstName);// Rohan delete (obj.firstName)console.log(obj.firstName)// undefined

18. Basic Project Setup

19. Ajax application can be divided in two part Ajax Deluxe Applications feel similar to a desktop app Its fully Ajax + JavaScript driven application Scalable and for big applications Ajax Lite Application/website feels more like a conventional web app Ajax is used for small operations like validation with server Useful only for small, quick functionality Web 2 App types

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

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

22. Index.html Version 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> <!-- Bring in the ExtJs Libraries and CSS --> <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> <!-- Place the page specific js here --> <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>

23. Index.html Version 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> <!-- Bring in the ExtJs Libraries and CSS --> <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> <!-- Place the page specific js here --> <script type="text/javascript" src="lib/com/company/myapp/package1/Main.js "> </script> </head> <body></body> </html>

24. 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!"); });

25. Now, for creating a Ajax Deluxe App from our existing setup It 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..

26. 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' }); // viewport new Ext.Viewport({ id: 'id-viewport' ,layout : 'border' ,items : [northPanel,southPanel,westPanel,centerPanel] }); });

27. Preview: using Viewport

28. Here is object oriented programming with JavaScript We will create View, ViewLayout.js Class, which will render this Border Layout. We will modify Main.js and will create ViewLayout.js in directory package2 Add entry in Index.html for ViewLayout.js, Main.js OO

29. Index.html <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Basic Setup</title> <!-- Bring in the ExtJs Libraries and CSS --> <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> <!-- Place the page specific js here --> <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>

30. ViewLayout.js Ext.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..

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

32. Main.js 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(); // main execution start here, user defined function varonModuleLoad = function(){ varviewLayout = new com.company.hello.package2.ViewLayout(); viewLayout.createLayout(); } // main starting point onModuleLoad(); });

33. Preview: using OO, ViewPort

34. Design Patterns with ExtJS

35. Singleton Ext.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; })()

36. Module Ext.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; })()

37. Performance with ExtJS

38. Use reusable code Object Oriented Approach Modularize code Do not access DOM frequently Its computational heavy code Use Lazy loading, wherever possible But avoid heavy nesting Use of event delegation Events 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 browser Continued..

39. Use of JavaScript minification, obfuscater YUI 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 code Remove listeners which are not in use anymore Continued..

40. 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.length Avoid creating lot of HTML code with JavaScript Continued..

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

42. References http://www.jslog.com http://ajaxpatterns.org http://www.sencha.com/forum/ http://edspencer.net http://code.google.com/p/v8/ http://www.cherny.com/