• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sencha / ExtJS : Object Oriented JavaScript
 

Sencha / ExtJS : Object Oriented JavaScript

on

  • 21,446 views

Sencha:

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

Statistics

Views

Total Views
21,446
Views on SlideShare
21,201
Embed Views
245

Actions

Likes
13
Downloads
0
Comments
0

25 Embeds 245

http://mycodefactory.blogspot.com 108
http://mycodefactory.blogspot.co.uk 51
http://wp.twsm.com.tw 29
http://mycodefactory.blogspot.in 15
http://www.linkedin.com 8
http://mycodefactory.blogspot.cz 4
http://www.slashdocs.com 3
http://translate.googleusercontent.com 3
http://mycodefactory.blogspot.de 2
http://mycodefactory.blogspot.be 2
http://mycodefactory.blogspot.nl 2
https://www.linkedin.com 2
http://www.techgig.com 2
http://mycodefactory.blogspot.com.es 2
http://mycodefactory.blogspot.com.br 2
http://feeds.feedburner.com 1
http://efesto.cloudapp.net 1
http://mycodefactory.blogspot.it 1
http://www.docshut.com 1
http://mycodefactory.blogspot.tw 1
https://twitter.com 1
http://mycodefactory.blogspot.co.nz 1
http://mycodefactory.blogspot.ch 1
http://mycodefactory.blogspot.se 1
http://192.168.6.179 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Sencha / ExtJS : Object Oriented JavaScript Sencha / ExtJS : Object Oriented JavaScript Presentation Transcript

    • Sencha [ExtJS]: Object Oriented JavaScript
      Rohan Chandane
      www.slideshare.net/rohan.chandane
    • Namespace
      Class
      Constructor
      Properties
      Methods/ Functions
      Object
      Inheritance
      Object Oriented Approach
    • 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
    • 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;
      })();
    • 2nd way
      Continued..
      var com.company.app.JSClass = Ext.extend(Object,{
          .
          .
       })// end of class definition
    • 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("JSClassconstructor");
               Ext.apply(this, config)
           }
          .
          .
          })
          com.company.app.JSClass = JSClass ;
      })();
    • 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;
      })();
    • 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');
    • Inheritance
      Ext.ns("com.company.app");(function(){
          varNewJSClass = Ext.extend(com.company.app.JSClass,{
          .
          .
          .
          })    com.company.app.NewJSClass = NewJSClass;
      })();
    • 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;
      })();
    • 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;
      })();
    • 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);
    • 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(){}}
    • 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..
    • Modifying constructor in Module pattern to check Ext.apply()
      Adding console.log in JSClassto print config
      Create object of JSClassclass
      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
    • Extras of OO JavaScript
    • 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
    • Basic Project Setup
    • 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
    • Here, lets take a look at Ajax Deluxe first
      Continued..
    • Project structure
      AppName
      |
      |_lib
      |   |_com
      |   |   |_company
      |   |       |_myapp
      |   |            |_package1
      |   |                |_Main.js 
      |   |            |_package2
      |   |_ext
      |       |_(Extracted ExtJS lib & folders)
      |       |_(...)
      ||_assets
      |   |_css
      |   |_img|
      |_Index.html
    • 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>
    • 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>
    • 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 setup
      It needs to use Border Layout (Viewport)
      We will edit Main.js and will add Ext.Viewport()
      As Viewport 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'
      });
      // viewport
      new Ext.Viewport({
      id: 'id-viewport'
      ,layout : 'border'
      ,items : [northPanel,southPanel,westPanel,centerPanel]
      });
      });
    • Preview: using Viewport
    • 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
    • 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>
    • 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..
    • Continued..
      // viewport
      new Ext.Viewport({
      id: 'id-viewport'
      ,layout : 'border'
      ,items : [northPanel, southPanel, westPanel, centerPanel]
      });
      }
      });
      com.company.hello.package2.ViewLayout = ViewLayout;
      })();
    • 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();
      });
    • Preview: using OO, ViewPort
    • Performance with ExtJS
    • Use reusable code
      Object Oriented Approach
      Modularize code
      Do not access DOM frequently
      Use Lazy loading, wherever possible
      But stop nesting too much
      Use of event delegation
      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
      Continued..
    • 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..
    • I will update these notes periodically with my experiments,
      stay tuned..
      Note
    • 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/