Advance ExtJS concepts

Javascript Object• var obj = {}; obj.x = 10; obj.y = 20;• var obj = new Object; obj.x = 10; obj.y = 20;• function Foo() {this.x = 10; this.y = 20;}• var obj = new Foo• In JavaScript, each Object can inherit properties from another object,

called it's prototype • function Bar() {this.z = 30;}• Bar.prototype = new Foo; • Bar.prototype.constructor = Bar;• var obj = new Bar

x 10

y 20

Foo.prototype

constructor Foo

Object.protoype

constructor Object

z 30

Bar.prototype

x 10

y 20

constructor Bar

Foo.prototype

constructor Foo

Object.protoype

constructor Object

function Mammal(name){ this.name=name;this.offspring=[];

}

Mammal.prototype.baby=function(){ var newBaby=new Mammal("Baby "+this.name);this.offspring.push(newBaby);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=ChildClassName

• 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.PanelMyPanel = 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// Constructorvar 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 abovevar 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.PanelExt.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 Container’s 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

• BoxComponentI needs to have its size and/or position managed by a layout manager

• ContainerIf the required UI control is to contain other UI elements, but does not need any additional capabilities of Panel– onBeforeAdd – onAdd – onRemove – onLayout

• PanelIf 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 PluginA Plugin is a class which implements an init(Component) method which is attached to a Component through the plugins config option.

• A Factory methodIf 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 EventsMyPanel = 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' events from the 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: 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.