Preface
There has been a lot of confusion I have observed on the 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 the name Ext.ux.MyGrid. This is the 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 a new xtype or, in other 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. For example, the user clicks an icon or button and a 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 in the application at the time of first page loading (application code first run). You will have an object of class Ext.ux.MyGrid somewhere in the browser’s memory waiting for rendering on a user click.
This is just for one grid – you may have hundreds of them… What a waste of resources! The grid is sitting somewhere there but the 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 as expensive as a complex instantiated class.
Now, what happens if the 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. ComponentMgr knows: “If I need to instantiate an object of xtype mygrid I need to create an object of class Ext.ux.MyGrid” so it runs this code:
create : function(config, defaultType){
return new types[config.xtype || defaultType](config);
}
In other “words”:
return new Ext.ux.MyGrid(config);
That instantiates our grid; rendering and displaying will follow. Remember: Instantiated only if needed.
Further Reading
Writing a Big Application in Ext
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
16 Responses
thanks!