A Link component in Ext JS 4

In the earlier post, we saw an example of creating a helloworld label component in Ext JS4. Let’s try to create a hyperlink component here. The hyperlink component that you’ll create will be used as shown below.

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

There are more than two ways of implementing this component. Let’s choose the simplest approach. You will create a class that inherits Ext.Component with the autoEl property as anchor element. The class is shown below.

Ext.define("DuraSoft.custom.Link",{
	extend : "Ext.Component",
	xtype : "link",
	autoEl : {
		tag : "a",
		html : "Click",
		href : "#"
	},
	initComponent : function(){
		if(this.text)
			this.autoEl.html = this.text;
		if(this.href)
			this.autoEl.href = this.href;
		this.callParent(arguments);
	}
});

In the class above, we’ve inherited Ext.Component class and overridden the initComponent method. In the initComponent method we check for the text and href attributes and apply it to the autoEl object.

Running this code will render a simple hyperlink element in the body of the page.

In the next post, we’ll look at a different approach to implementing the link component.