Print Shortlink

Hello World label component in Ext JS4

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"} 
			        ]
			});
		}
	});

Leave a Reply