Sencha / ExtJS : Object Oriented JavaScript

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
(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
(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
(function(){
//constructor function
//console.log("constructor called" );
},
// 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
(function(){
//constructor function
}
// 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
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>

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

<script type="text/javascript" src="lib/com/company/myapp/package1/Main.js "> </script>

</head>
<body></body>
</html>

Main.js
Version 2:
// 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()
// 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>
<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,{
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
// 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/

http://mycodefactory.blogspot.com	87
http://translate.googleusercontent.com	3
http://www.techgig.com	2
http://mycodefactory.blogspot.it	1
http://mycodefactory.blogspot.in	1

Sencha / ExtJS : Object Oriented JavaScript

by Rohan Chandane on Feb 18, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 94

Statistics

Sencha / ExtJS : Object Oriented JavaScript — Presentation Transcript