xtype

In Ext JS 4 every UI component class has an alias name or a short name known as ‘xtype.’ Using xtype in our code offers some advantages. Let’s discuss them by creating a Panel with a textbox and a button as shown below.

Ext.create("Ext.panel.Panel",{

items : [

Ext.create("Ext.form.field.Text",{

fieldLabel : "Name"

}),

Ext.create("Ext.Button",{

text : "Submit"

})]

});

Let’s move the creation of textbox and button out of the Panel as shown below.

var nameText = Ext.create("Ext.form.field.Text",{

fieldLabel : "Name"

});

var submitButton = Ext.create("Ext.Button",{

text : "Submit"

});

The Panel will refer to the nameText and submitButton variables in the items collection.

Ext.create("Ext.Panel",{

items : [

nameText,submitButton

]});

We have stored the textbox and button objects in separate variables and reused them inside the Panel. There are some disadvantages to writing code in this style, although it is useful to se[erate the container and the individual components.

Ext.create("Ext.form.field.Text") creates a text box and holds it in the DOM tree. It occupies memory even if we don’t render it on to the screen. Suppose we don’t add the nameText variable in the Panel, it would remain in the DOM tree occupying memory. In an application, we want to instantiate UI components only when required and not create them at will. At the same time we want the component creation code maintained separately.

Using the fully qualified class name like Ext.form.field.Text everywhere is a tedious task, particularly when we create custom components. It would be better if we can use the xtype of these UI components. Let’s rewrite the example as shown below.

var nameText = {

xtype : "textfield",

fieldLabel : "Name"

};

var submitButton = {

xtype : "button",

text : "Submit"

};

Ext.create("Ext.panel.Panel",{

renderTo : Ext.getBody(),

items : [

nameText,submitButton

]});

The nameText and submitButton are plain JavaScript objects. They have an additional xtype property with values textfield and button, respectively. The actual text box and button objects are created when they get added to the Panel and rendered to the body. This not only makes the code simpler but also provides us the lazy instantiation facility.