Professional Documents
Culture Documents
Javascript Object
x y
10 20
var obj = {}; obj.x = 10; obj.y = 20; Foo.prototype var obj = new Object; obj.x = 10; obj.y = 20; constructor 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
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 } );
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 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
Panel If the required UI control must have a header, footer, or toolbars, then Ext.Panel is the appropriate class to extend.
onCollapse onExpand
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' 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 }; }();
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.
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.