Advance ExtJS concepts

Javascript Object

10

20

var obj = {}; obj.x = 10; obj.y = 20;

Foo.prototype
var obj = new Object; obj.x = 10; obj.y = constructor
20;
Foo
function Foo() {this.x = 10; this.y = 20;} Object.protoype
var obj = new Foo
constructor
Object
In JavaScript, each Object can inherit properties from
another object, called it's prototype
z
30
function Bar() {this.z = 30;}
Bar.prototype
Bar.prototype = new Foo;
x
10
Bar.prototype.constructor = Bar;
y
20
var obj = new Bar
constructor
Bar
Foo.prototype
constructor

Foo

Object.protoype
constructor

Object

function Mammal(name){
this.name=name;
this.offspring=[];
}
Mammal.prototype.baby=fun
ction(){
var newBaby=new
Mammal("Baby
"+this.name);
this.offspring.push(newBab
y);
return newBaby;
}

function Cat( name ){

this.name=name;
}
Cat.prototype = new Mammal();
Cat.prototype.constructor=Cat;
Cat.prototype.parent =
Mammal.prototype;
Cat.prototype.baby=function(){
var theKitten =
this.parent.baby.call(this);
alert("mew!");
return theKitten;
}

Inheritance Summary
You cause a class to inherit using
ChildClassName.prototype = new ParentClass();
You need to remember to reset the constructor
property for the class using
ChildClassName.prototype.constructor=ChildClas
sName
You can call ancestor class methods which your
child class has overridden using the
Function.call() method.

Inheritance: ExtJS
Ext provides a utility function called Ext.extend that is
the mechanism for implementing class inheritance using
the Ext framework.
It gives you the ability to modify or extend the base
functionality of any JavaScript class without making code
changes directly to the class itself .
It is the preferred method for extending Ext components.
MyClass = Ext.extend(Ext.SomeClass, {
someFunction : function(arg1, arg2){
// custom code
// call base class
MyClass.superclass.someFunction.call(this, arg1,
arg2);
// custom code
}
);

How to create custom extjs

components
Sometimes you will have a component whose
config options you want to make reusable. For
example, you may have a set of panels with the
same width and height, only the title is different.
This is called a preconfigured class.
Another reason you want to use OO classes is
that you want to extend the functionality of
another class. Let us say you want to add a
function in the above panel and override an
existing function.

Constructor Model
// MyPanel Extends Ext.Panel
MyPanel = Ext.extend(Ext.Panel, {
// constructor function
constructor: function(config) {
Ext.apply(this, {
// Put your pre-configured config options here
width: 300,
height: 300
});
MyPanel.superclass.constructor.apply(this, arguments);
}
});
var myfirstpanel = new MyPanel({
title: 'My First Panel'
});

Factory Pattern
function createMyPanel(config) {
return new Ext.Panel(Ext.apply({
//Pre-configured config options go here
width: 300,
height: 300
}, config));
};
var myfirstpanel = createMyPanel({
title: 'My First Panel'
});

Extending Functionality
// Constructor
var MyPanel = function(config) {
//Reusable config options here
Ext.apply(this, {
width: 300,
height: 300
});
// And Call the superclass to preserve baseclass
functionality
MyPanel.superclass.constructor.apply(this, arguments);
// Here you can add functionality that requires the object
to exist, like event handling.
this.on('click', function() {alert("You Clicked " +
this.title);}, this);
};

 Another way to write the constructor above

var MyPanel = function(config) {
// Call the superclass to preserve baseclass functionality
MyPanel.superclass.constructor.call(this, Ext.apply({
//Reusable config options here
width: 300,
height: 300
}, config));
// After superclass constructor add functionality that
requires
// the object to exist (like event handling...listeners)
this.on('click', function() {alert("You Clicked " + this.title);},
this);
};

// MyPanel Extends Ext.Panel

Ext.extend(MyPanel, Ext.Panel, {
// Here you can add static variables for the class. variables
that will have
// the same value for all object instances of this class.
// New function added
myNewFunction: function() {
},
// Override an existing function
onRender: function() {
MyPanel.superclass.onRender.apply(this, arguments);
this.myNewFunction();
}
});
// register xtype to allow for lazy initialization
Ext.reg('mypanelxtype', MyPanel );

initComponent (new)
To extend an Ext class we do not need to create a
constructor function. We just need to assign the
return value of Ext.extend call to a variable in our
name space. Ext.extend takes the original class and a
config object as arguments and returns our extension.
All tasks that were done in a custom constructor
function are now done in initComponent function
that we almost always override. initComponent is
called early from the parent constructor function.
However, initComponent of the original class contains
useful code that needs to be executed.
Registering an xtype for your extension is not
mandatory but it is very good practice.

initComponent: function() {
//Reusable config options here
Ext.apply(this, {
width: 300,
height: 300
});
// And Call the superclass to preserve baseclass
functionality
MyPanel.superclass.initComponent.apply(this,
arguments);
// Here you can add functionality that requires the object
to
// exist, like event handling.
this.on('click',function() {alert("You Clicked " +
this.title);},this);
}

var MyPanel = Ext.extend(Ext.Panel, {

// Here you can add static variables for the class. variables that
// will have the same value for all object instances of this class.
initComponent: function() {

},
// New function added
myNewFunction: function() {
},
// Override an existing function
onRender: function() {
MyPanel.superclass.onRender.apply(this, arguments);
this.myNewFunction();
}
});
var myfirstpanel = new MyPanel({
title: 'My First Panel'
});

Composition or Extension
When creating a new class, the decision must be
made whether to own an instance of a utility
class which is to perform a major role, or to
extend that class.
It is recommended that you extend the nearest
base class to the functionality required.

The Template method Pattern

The render method is called (This is done by a Containers

layout manager). This method may not be overridden and is
implemented by the Ext base class

The Template Methods for Component

onRender
afterRender
onAdded
onRemoved
onShow
onHide
onDisable
onEnable
onDestroy

Which class to extend

Component
If the required UI control does not need to contain any other controls,
that is, if it just to encapsulate some form of HTML which performs
the requirements
BoxComponent
I needs to have its size and/or position managed by a layout
manager
Container
If the required UI control is to contain other UI elements, but does
not need any additional capabilities of Panel
onBeforeAdd
onAdd
onRemove
onLayout

Panel
If the required UI control must have a header, footer, or toolbars,
then Ext.Panel is the appropriate class to extend.
onCollapse
onExpand

When a subclass is not needed

Method injection
When in one particular situation, one piece of functionality of an existing
class needs to be overridden, or added to, an instance-specific
implementation.
Configuring a Plugin
A Plugin is a class which implements an init(Component) method which is
attached to a Component through the plugins config option.
A Factory method
If all that is required is a specific configuration of an existing class.
Override a functionality (universally)
Adds a list of functions to the prototype of an existing class, overwriting
any existing methods with the same name. Usage:
Ext.override(MyClass, {
newMethod1: function(){
// etc.
},
newMethod2: function(foo){
// etc.
}
});

Events in Ext
Event is a message, a function call, generated by
one (part of) program, the event source, that
notifies another (part of) program, the event
listener, that something happened.
Events in Ext
DOM Events
JavaScript Events
var myPanel = new Ext.Panel({...});
myPanel.on('some_event', function() {});
Event source in ExtJS are extension of
Ext.Util.Observable class

Custom Events
MyPanel = Ext.extend(Ext.Panel, {
initComponent:function() {
...
MyPanel.superclass.initComponent.apply(this, arguments);
...
// add custom events
this.addEvents('loaded', 'completed');
},
load:function(cfg) {
....
// fire loaded event
this.fireEvent('loaded', this, cfg);
},
complete:function(cfg) {
...
// fire completed event
this.fireEvent('completed', this, cfg);
}
});

Relay Events

Relays selected events from the specified Observable as if the

events were fired by this

var content = new MyPanel({...});

var itemx =

// create the window and add content panel

var win = new Ext.Window({
...
items : [itemx, , content ]
});
// Tell the window to handle the 'loaded' and 'completed'
content panel
win.relayEvents(content, ['loaded', 'completed']);
// here's the handlers for the custom MyPanel events
win.on( {
'loaded' : function (panel, obj) {...},
'completed' : function(panel, obj) {...},
scope : this
});

events from the

Events: Summary
event is a message sent (fired) by an event
source to inform listeners that something
happened
event source is an object that can fire events
event listener is a function that is called when
event source fires an event
to listen to events we use on function to install an
event listener
to create an event source we extend Observable
class, addEvents and fireEvent

Namespaces
It is typical to include many libraries, widgets and
snippets of code from many different sources.
not a safe assumption that you have the entire
global namespace at your disposal.
When developing your own scripts you should
place all of your classes and singletons into
namespaces to avoid collisions with other
developers code.
An abstract container to hold all of your classes
and singletons

Namespaces (ExtJS)
if (!App) App = {};
if (!App.form) App.form = {};
if (!App.data) App.data = {};

Ext provides the Ext.namespace method which will setup namespaces for you,
including checking if the namespace already exists.

/* Ext.namespace will create these objects if they don't already exist */

Ext.namespace('App', 'App.form', 'App.data');
/* Now you can define a new class such as SampleForm inside of the App.form package */
App.form.SampleForm = Ext.extend(Ext.form.FormPanel, {
initComponent: function() {
...
App.form.SampleForm.superclass.initComponent.call(this);
}
});
/* Define MySingleton inside of the App.data package */
App.data.MySingleton = function() {
return {
x: 4
};
}();

Upgrade of ExtJS (to version 3.x)

Look for extended classes and see if they override
any base ExtJS Classes methods. Ensure that
these are not modified.
Ensure you have updated all the Ext-provided CSS
with the new CSS from version 3.
Ensure you have updated all the Ext-provided
images with the new images from version 3.
Read the release notes and look for areas in
coding using changed functionality.
They have done some changes in data stores and
ajax. If you have not extended these classes then
you should be OK.

Debugging ExtJS

Using IE Explorer debugger for 8.x

Using MS Visual studio
Using Firebug for firefox
Using other in-built debuggers with
respective browsers

ExtJS Performance
Build your own Extjs - this will just use the
components you need, and as well css. Reduces
file size.
Compress using JSmin.
Concatenate all your Javascript sources into one
file for live running.
Serve javascript files gzipped.
Avoid memory leaks like using mon instead of on
to bind events.
Destroy any component added to this on destroy
of this.

ExtJS Cross browser

ExtJs supports
IE 7.x, 8.x
FF 2.x, 3.x
Webkit based browsers (safari, chrome)
Handling of trailing commas in JSON for IE
CSS issues related to box model on IE
Other CSS issues like float, z-index

ExtJS Coding Standards

The unit of indentation is four spaces
Avoid lines longer than 80 characters.
Place the break after an operator, ideally after a
comma.
Be generous with comments.
All variables should be declared before used.
All functions should be declared before they are
used. Inner functions should follow the var
statement.
Names should be formed from the 26 upper and
lower case letters (A .. Z, a .. z), the 10 digits (0 ..
9), and _ (underbar).
Global variables should be in all caps.

 Each line should contain at most one statement. Put

a ; (semicolon) at the end of every simple statement.
A return statement with a value should not use ( )
(parentheses) around the value.
Use {} instead of new Object(). Use [] instead of new
Array().
Avoid the use of the comma operator except for very
disciplined use in the control part of for statements.
It is almost always better to use the === and !==
operators. The == and != operators do type
coercion.
The eval function is the most misused feature of
JavaScript. Avoid it.