Analysis of the meaning of xtype in EXT_extjs

Preface

According to my observations on the forum, there are more doubts when using xtype. Some people even ignore xtype at all, or don't know what it is. So I decided to elaborate on this concept of xtype.

Definition

xtype is an identification name that represents a class (Class).

For example, you have this class named Ext.ux.MyGrid. Normally you need to use this name to instantiate the class (create an object of the class).

In addition to the class name, you can also register the xtype of the class like this:
Ext.reg('mygrid', Ext.ux.MyGrid);

where xtype is mygrid and the class The general form of the name is Ext.ux.MyGrid. The above statement registers a new xtype. In other words, xtype mygrid is connected to the class Ext.ux.MyGrid.

What are the benefits?

Imagine that you have a large project on hand. In order to respond to user operations, the program contains a large number of objects (windows, forms, grids). When the user clicks an icon or button, a new form will be created with a grid inside the form, which will eventually be rendered on the screen.

Well, let’s go back to the coding before Ext2.x. At that time, we instantiated all objects after the page was loaded for the first time (the first time the program code was run). In the client memory, the object of the Ext.ux.MyGrid class already exists, waiting for the user's click. For the same grid, assuming you have hundreds of instances,... what a waste of precious resources! In fact, for many grids, users may not click on them to make them appear.

Delayed instantiation

If you use xtype, then what is in the memory is just a configuration item object, like:

Copy the code The code is as follows:

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

Not as expensive as a complex instance object.

Well, what happens when the user clicks a button or icon? Ext will recognize it as a grid that is ready to be rendered but not immediately. Instantiation, Ext understands this with the help of ComponentMgr: "If I want to instantiate an object of xtype mygrid, I know that what I want to create is actually an object of class Ext.ux.MyGrid", which is the following code:

Copy code The code is as follows:

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

is equivalent to:
Java code

Copy code The code is as follows:

return new Ext.ux.MyGrid(config);

Then instantiate the grid and proceed Rendering and display. Remember: instantiate only when needed.