Bleext

Ext JS has always been characterized as an object oriented library, from the first version Ext JS has provided a system for creating classes and inheritance, among releases it has been changing a bit, but in version 4 the system classes have changed considerably.

We saw how to create classes with the new system, now we will learn how to extend a class and add extra functionality.

Extending

To extend a class we must define the property “extend” followed by the class from which we want to inherit.

Ext.define("Bleext.training.UserPanel",{
	extend 	: "Ext.panel.Panel",	//<-- Inheritance

	title 		: "User information",
	width		: 300,
	height		: 300,
	bodyPadding	: 10,
	html		: "Testing!"	
});

By using the “Ext.define” method we are defining a class that inherits from “Ext.panel.Panel”, when we do this automatically our class has all the methods and properties of the panel, apart from this we can configure or specialize our class. In this case we have only added a few configurations, the following thing we need to do is to create an instance of that class and render it somewhere in our document.

Ext.onReady(function(){
	Ext.create("Bleext.training.UserPanel",{
		renderTo	: "center"	//<-- the DIV in where we defined the html
	});
});

Inheriting from Ext.panel.Panel

The method "Ext.onReady" (as in version 3) executes the anonymous function as a parameter when the DOM is ready, therefor inside of that function we create an instance of the class we've just defined.

Using a template

In Ext4 there's a property called "tpl" which lets you add an instance of the class Ext.XTemplate or an array with the parameters that will be received by the XTemplate class so it be created automatically, also we can define a property "data" with the information the template will use.

Ext.define("Bleext.training.UserPanel",{
	extend 	: "Ext.panel.Panel",	//<-- Inheritance

	title 		: "User information",
	width		: 300,
	height		: 300,
	bodyPadding	: 10,
	html		: "Testing!"

	data		: {
		name	: "John",
		lastname: "Doe",
		company	: "Bleext",
		age	: 27,
		status	: "Active",
		phone	: "(12) 34 567 890"
	},
	tpl		: [
		'<p><strong>Name</strong>: {name} {lastname}</p>',
		'<p><strong>Company</strong>: {company}</p>',
		'<p><strong>Age</strong>: {age} years old</p>',
		'<p><strong>Phone</strong>: {phone}</p>',
		'<p><strong>Status</strong>: {status}</p>'
	]	
});

Using a template for the content

Notice how in the templates we defined the fields of the object "data" between braces "{" and "}", this will replace the values ​​dynamically in the generated HTML.

Overriding methods

It is very common when develop in an object-oriented way to add extra functionality on the methods or specialized them in some specific task of the class we are defining.

When overwriting a method we should consider that we are eliminating the functionality that was inherited, therefore we must call the super class method to lose nothing. Ext JS 4 provides a simple way to execute a method that has been over-written, we just have to run the method "callParent" and the library automatically identifies the correct method.

Ext.define("Bleext.training.UserPanel",{
	extend 	: "Ext.panel.Panel",	//<-- Inheritance

	title 		: "User information",
	width		: 300,
	height		: 300,
	bodyPadding	: 10,

	data		: {
		name	: "John",
		lastname: "Doe",
		company	: "Bleext",
		age	: 27,
		status	: "Active",
		phone	: "(12) 34 567 890"
	},
	tpl		: [
		'<p><strong>Name</strong>: {name} {lastname}</p>',
		'<p><strong>Company</strong>: {company}</p>',
		'<p><strong>Age</strong>: {age} years old</p>',
		'<p><strong>Phone</strong>: {phone}</p>',
		'<p><strong>Status</strong>: {status}</p>'
	],

	initComponent	: function(){
		var me = this;
		
		me.tbar = [{text:"Save"},{text:"Edit"},{text:"Delete"}];

		me.callParent();	//<-- super class call
	}
});

Overriding the method initComponent

In the previous example we are overwriting the method "initComponent" to add a toolbar at the top part of the panel, notice how in the last line the "initComponent" of the super class is called, this is very important because if we don't do it the component will not work, this is because in the super class the "initComponent" makes several important things.

In Ext3 there was a property called "superclass" that was added as static to the classes, this has disappeared and instead we have to use the method "callParent" which is smart enough to know which method needs to be called in the super class.

Conclusion

ExtJS was created to be inherited, as we develop our own application we will use single inheritance to extend the components that the library has. In today's example we created an user form extending from the panel class, we can extend from any other class of the framework and specialize it through simple inheritance.

Comments