santosh.rajan
17 Sep 2008, 4:30 AM
I am posting here the 'constructor model' for extending Ext which I think will be easier for newbies to understand. I would like to post this as a tutorial, but before that I would like all of your comments and suggestions.
You create a class in Ext by extending an Ext class. You do that for one of two reasons.
1) You have a component whose config option you want to make reusable. Eg. You have a set of panels with same width and height only the title is different. This is called a preconfigured class. You can do it like this.
// Constructor
var MyPanel = function(config) {
Ext.apply(this, { // Put your pre-configured config options here
width: 300,
height: 300
});
MyPanel.superclass.constructor.apply(this, arguments);
};
// MyPanel Extends Ext.Panel
Ext.extend(MyPanel, Ext.Panel, {});
var myfirstpanel = new MyPanel({
title: 'My First Panel'
});
var mysecondpanel = new MyPanel({
title: 'My Second Panel'
});
Another way to create preconfigured objects is by creating a factory function (a pre-configuring function) that returns a new instance of the object, as shown by @Animal in another thread. This does not require extending a class, and strictly speaking does not come under the scope of this discussion. I have added this here to show an alternative to the above method. This is simpler than the above method .
function createMyPanel(config) {
return new Ext.Panel(Ext.apply({ // Put your pre-configured config options here
width: 300,
height: 300
}, config));
};
var myfirstpanel = createMyPanel({
title: 'My First Panel'
});
var mysecondpanel = createMyPanel({
title: 'My Second Panel'
});
2) The second reason you want to extend a class is the traditional reason of OOP, ie you want to extend the functionality of the of the class. Let us say you want to add a function in the above panel and overwride an existing function. This is how you will do it.
// 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);
};
// 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.
// If you are not sure put it in the constructor above. Dont put any abject
// created with 'new' or 'xtype' here. You are safer putting it in the config
// option in the constructor.
// 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'
});
var mysecondpanel = new MyPanel({
title: 'My Second Panel'
});
Another way to write the constructor above as shown by @Condor is
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));
// Here you can add functionality that requires the object to exist,
// like event handling.
this.on('click', function() {alert("You Clicked " + this.title);}, this);
};
The above manner for extending an Ext class is the 'constructor model'. Another way of extending an Ext class is the 'initComponent model'. As the name suggests this method is only applicable to extending Ext Components. Here is an example.
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.
// If you are not sure put it in the constructor above. Dont put any abject
// created with 'new' or 'xtype' here. You are safer putting it in the config
// option in the constructor.
// New function added
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);
},
myNewFunction: function() {
},
// Override an existing function
onRender: function() {
MyPanel.superclass.onRender.apply(this, arguments);
this.myNewFunction();
}
});
The first thing you will notice is that there is no constructor here. Ext creates the constructor for you. The constructor created by Ext will call initComponent. This is a widely used method you will find in the advanced tutorials and Examples. But Just remember for now it does the same thing as the constructor model.
The preferred way to handle event handling (listeners) is to add them after the call to the superclass in the constructor or initComponent.
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);
In the case of the factory method you would add a event handler outside of the factory method like this.
myFirstPanel.on('click', function() {alert("You Clicked " + this.title);}, myFirstPanel);
There are other ways of handling listeners notably by adding a 'listeners' config option. But I would recommend that to advanced users.
Further Reading:
1) Saki's Tutorial: Extending Ext Class (http://extjs.com/learn/Tutorial:Extending_Ext_Class)
2) mjlecomte's Sticky on Extending Ext Class (http://www.extjs.com/forum/showthread.php?t=28085)
3) Discussion on this Tutorial (http://www.extjs.com/forum/showthread.php?t=47413)
________________
You create a class in Ext by extending an Ext class. You do that for one of two reasons.
1) You have a component whose config option you want to make reusable. Eg. You have a set of panels with same width and height only the title is different. This is called a preconfigured class. You can do it like this.
// Constructor
var MyPanel = function(config) {
Ext.apply(this, { // Put your pre-configured config options here
width: 300,
height: 300
});
MyPanel.superclass.constructor.apply(this, arguments);
};
// MyPanel Extends Ext.Panel
Ext.extend(MyPanel, Ext.Panel, {});
var myfirstpanel = new MyPanel({
title: 'My First Panel'
});
var mysecondpanel = new MyPanel({
title: 'My Second Panel'
});
Another way to create preconfigured objects is by creating a factory function (a pre-configuring function) that returns a new instance of the object, as shown by @Animal in another thread. This does not require extending a class, and strictly speaking does not come under the scope of this discussion. I have added this here to show an alternative to the above method. This is simpler than the above method .
function createMyPanel(config) {
return new Ext.Panel(Ext.apply({ // Put your pre-configured config options here
width: 300,
height: 300
}, config));
};
var myfirstpanel = createMyPanel({
title: 'My First Panel'
});
var mysecondpanel = createMyPanel({
title: 'My Second Panel'
});
2) The second reason you want to extend a class is the traditional reason of OOP, ie you want to extend the functionality of the of the class. Let us say you want to add a function in the above panel and overwride an existing function. This is how you will do it.
// 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);
};
// 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.
// If you are not sure put it in the constructor above. Dont put any abject
// created with 'new' or 'xtype' here. You are safer putting it in the config
// option in the constructor.
// 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'
});
var mysecondpanel = new MyPanel({
title: 'My Second Panel'
});
Another way to write the constructor above as shown by @Condor is
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));
// Here you can add functionality that requires the object to exist,
// like event handling.
this.on('click', function() {alert("You Clicked " + this.title);}, this);
};
The above manner for extending an Ext class is the 'constructor model'. Another way of extending an Ext class is the 'initComponent model'. As the name suggests this method is only applicable to extending Ext Components. Here is an example.
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.
// If you are not sure put it in the constructor above. Dont put any abject
// created with 'new' or 'xtype' here. You are safer putting it in the config
// option in the constructor.
// New function added
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);
},
myNewFunction: function() {
},
// Override an existing function
onRender: function() {
MyPanel.superclass.onRender.apply(this, arguments);
this.myNewFunction();
}
});
The first thing you will notice is that there is no constructor here. Ext creates the constructor for you. The constructor created by Ext will call initComponent. This is a widely used method you will find in the advanced tutorials and Examples. But Just remember for now it does the same thing as the constructor model.
The preferred way to handle event handling (listeners) is to add them after the call to the superclass in the constructor or initComponent.
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);
In the case of the factory method you would add a event handler outside of the factory method like this.
myFirstPanel.on('click', function() {alert("You Clicked " + this.title);}, myFirstPanel);
There are other ways of handling listeners notably by adding a 'listeners' config option. But I would recommend that to advanced users.
Further Reading:
1) Saki's Tutorial: Extending Ext Class (http://extjs.com/learn/Tutorial:Extending_Ext_Class)
2) mjlecomte's Sticky on Extending Ext Class (http://www.extjs.com/forum/showthread.php?t=28085)
3) Discussion on this Tutorial (http://www.extjs.com/forum/showthread.php?t=47413)
________________