Prabhu Sunderaraman

Continuing my work on custom components in Ext JS4, let’s create a custom grid component. This component takes up JSON data and displays it in a tabular format.

The component is used as shown below

{
	xtype : "mygrid",
	fields : ["name","age"],
	data : [{name:"Sam",age:12},{name:"Ram",age:22}]
} 

The MyGrid component is shown below. The complicated part of the class is the XTemplate instance. The class is shown below.

Ext.define("DuraSoft.custom.MyGrid",{
		extend : "Ext.Component",
		requires: ['Ext.XTemplate'],
		xtype : "mygrid",
		padding : 20,
		tpl : new Ext.XTemplate(
				'<table border="2">',
				'<thead><tr>',
				'<tpl for="fields">',
				'<th>{[this.formatHeader(values)]}</th>',
				'</tpl>', 
				'</tr></thead><tbody>',
				'<tpl for="data">',
				'<tr>{[this.cells(values)]}</tr>',
				'</tpl>', 
				'</tbody></table>',
				{
					formatHeader : function(val){
					    return val[0].toUpperCase()+val.substring(1,val.length);
					},
					cells : function(obj){
					    var cells =  "";
					    for(var i in obj){
						cells += "<td>" + obj[i] + "</td>";
					    }
					    return cells;
					}
				}
			),
			initComponent : function(){
				this.data = {
						fields : this.fields,
						data : this.data
					};
					this.callParent(arguments);
				}
		});

The XTemplate constructs a table element, using fields and data. The XTemplate has two functions formatHeader and cells to format the header and data.

In the earlier post, we discussed creating a link component in Ext JS 4 using the autoEl property. The autoEl object is initialized with the values passed during the creation of the link component. Let’s create the following link component using a template-based approach.

{
        xtype : "link",
        href : "http://www.google.com",
        text : "Search"
}

Instead of using the autoEl property which renders the tag, you’ll define the complete html that you want to be rendered. We’ll use tpl property of the Ext.Component class to define a html template. The tpl property will look like

tpl : "<a href={href}>{text}</a>"

The {href} and {text} expressions will be replaced with the actual values passed through the data property as shown below.

data : {
		href : "http://www.google.com",
		text : "Search"
}

The complete Link component is shown below.

Ext.define("DuraSoft.custom.Link",{
			xtype : "link",
			extend : "Ext.Component",
			tpl : '<a href="{href}">{text}</a>',
			 data : {
				href : "http://www.google.com",
				text : "Search"
			} 
		});

The code above has hardcoded data. You can initialize the data property dynamically with the values passed during creation of the component as shown below.

Ext.define("DuraSoft.custom.Link",{
			xtype : "link",
			extend : "Ext.Component",
			tpl : '<a href="{href}">{text}</a>',
			initComponent : function(){
				 this.data = {
						text : this.text,
						href : this.href
				};  
			} 
});

As you can see, the template-based approach is preferred in case of complex components as it gives you more flexibility.

Creating custom Components in Ext JS 4 involves following a series of steps. If you understand the Object-Oriented concepts of Ext JS4, it’s not really mind-boggling.

Say you want to create a component that renders the following HTML.

<label>Hello World</label>

All you need to do is create a class that inherits “Ext.Component” class and define the autoEL property. The autoEL property,according to the documentation refers the DOM Element that encapsulates this component. It can be an ordinary String or a DOMHelper object, which has 4 attributes tag,html,cls, and children.
Let’s create our HelloWorld component using this autoEl property as shown below.

Ext.define("DuraSoft.custom.HellWorldLabel",{
	xtype : "helloworld",
	extend : "Ext.Component",
        autoEl : {
	  tag : "label",
 	  html : "Hello World"
	}
});

The DuraSoft.custom.HelloWorldLabel class inherits the Ext.Component and defines the autoEl property to be a label tag with “Hello World” as html.

Now, let’s create a Panel and render the helloworld component as shown below.

Ext.application({
	launch : function(){
		Ext.create("Ext.panel.Panel",{
			renderTo : Ext.getBody(),
			items : [
			        	{xtype : "helloworld"} 
			        ]
			});
		}
	});