From Learn About the Ext JavaScript Library

Contents 1 Preface 2 Definition 3 What is it good for? 4 Lazy Instantiation 5 Further Reading

Preface

There has been a lot of confusion I could observe on Ext Forums as to xtype. Some people ignore it fully, some think that it is what it is not. So I've decided to clarify it.

Definition

xtype is a symbolic name given to a class. Nothing less, nothing more.

For example, your class has name Ext.ux.MyGrid. This is normal class name that you use when you need to instantiate this class (create an object of the class).

In addition to class name you can give your class xtype this way:

Ext.reg('mygrid', Ext.ux.MyGrid);

xtype here is mygrid and normal class name is Ext.ux.MyGrid. The above statement registers new xtype or, in another words, connects xtype mygrid with class Ext.ux.MyGrid.

What is it good for?

Imagine you have a big application where objects (windows, forms, grids) are created when they are needed as responses to user actions. User clicks an icon or button, new window with a grid inside is created, rendered and displayed on the screen.

Now, if you code such application in an before-Ext-2.x way you need to instantiate all objects the application is composed at the time first page loading (application code first run). You have an object of class Ext.ux.MyGrid somewhere in the browser's memory waiting for rendering on an user click.

Not only this one grid, you have hundreds of them... What a waste of resources! The grid is sitting somewhere there but user may never click that button, may never need that grid.

Lazy Instantiation

If you have xtype, the only thing that sits in the memory is a simple configuration object such as:

{xtype:'mygrid", border:false, width:600, height:400, ...}

That is not that expensive as a complex instantiated class.

Now, what happens if user clicks our button? Ext will see that the to-be-rendered-grid is not even instantiated but it knows how to deal with it as ComponentMgr knows: "If I need to instantiate an object of xtype mygrid I need to create the object of class Ext.ux.MyGrid" so it runs this code:

create : function(config, defaultType){
    return new types[config.xtype || defaultType](config);
}

In another "words":

return new Ext.ux.MyGrid(config);

That instantiates our grid, rendering and displaying will follow. Remember: Instantiated only if needed.

Further Reading

• Same article in my blog You can comment it there.
• Writing a Big Application in Ext