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.
The following is a list of all xtypes combined with the matching class that you instantiate.
xtype Class ------------- ------------------ box Ext.BoxComponent button Ext.Button colorpalette Ext.ColorPalette component Ext.Component container Ext.Container cycle Ext.CycleButton dataview Ext.DataView datepicker Ext.DatePicker editor Ext.Editor editorgrid Ext.grid.EditorGridPanel grid Ext.grid.GridPanel paging Ext.PagingToolbar panel Ext.Panel progress Ext.ProgressBar propertygrid Ext.grid.PropertyGrid slider Ext.Slider splitbutton Ext.SplitButton statusbar Ext.StatusBar tabpanel Ext.TabPanel treepanel Ext.tree.TreePanel viewport Ext.Viewport window Ext.Window Toolbar components --------------------------------------- toolbar Ext.Toolbar tbbutton Ext.Toolbar.Button tbfill Ext.Toolbar.Fill tbitem Ext.Toolbar.Item tbseparator Ext.Toolbar.Separator tbspacer Ext.Toolbar.Spacer tbsplit Ext.Toolbar.SplitButton tbtext Ext.Toolbar.TextItem Form components --------------------------------------- form Ext.FormPanel checkbox Ext.form.Checkbox combo Ext.form.ComboBox datefield Ext.form.DateField field Ext.form.Field fieldset Ext.form.FieldSet hidden Ext.form.Hidden htmleditor Ext.form.HtmlEditor label Ext.form.Label numberfield Ext.form.NumberField radio Ext.form.Radio textarea Ext.form.TextArea textfield Ext.form.TextField timefield Ext.form.TimeField trigger Ext.form.TriggerField
Source: xtype defined by Saki
desayrable 