Analysis of the meaning of xtype in EXT

Preface

According to my observations on the Forum, there are many questions when xtype is used. Some people even ignore xtype, or do not know what it is. So I decided to elaborate on this xtype concept.

Definition

Xtype is an identifier that represents a Class.

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

In addition to the class name, you can register the class xtype as follows:
Ext. reg ('mygrid', Ext. ux. mygrid );

Here, xtype is mygrid, and the general form of class name is Ext. ux. MyGrid. The preceding statement registers the new xtype. In other words, xtype mygrid is connected with Ext. ux. MyGrid.

What are the benefits?

Imagine that you are working on a large project. In response to user operations, the program contains a large number of objects (windows, forms, grids ). When you click the icon or button, a new form is created. The form contains a grid, which is rendered on the screen.

Well, we went back to the code before Ext2.x. At that time, we instantiated all objects after the page was loaded for the first time (the program code was run for the first time ). In the client memory, the Ext. ux. MyGrid Class Object already exists, waiting for the user to click. This is also the grid. Suppose you have hundreds of instances. How a waste of valuable resources! Many grid users may not click to make it appear.

Delayed instantiation

If you use xtype, only one configuration item object is in the memory, such:
Copy codeThe Code is as follows:
{Xtype: 'mygrid ", border: false, width: 600, height: 400 ,...}


There is no complex instance object to consume.

Well, what if a user clicks a button or icon? Ext identifies it as a grid to be rendered but does not instantiate it immediately. Ext understands this with the help of ComponentMgr: "If I want to instantiate an xtype mygrid object, I will know that the class Ext is actually to be created. ux. myGrid object ". The following code is used:
Copy codeThe Code is as follows:
Create: function (config, defaultType ){
Return new types [config. xtype | defaultType] (config );
}

It is equivalent:
Java code
Copy codeThe Code is as follows:
Return new Ext. ux. MyGrid (config );

Then, instantiate the grid for rendering and display. Remember: It is instantiated only when necessary.