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
cool post!
Another great post
Thanks for the write up
Cant wait to see future post
Thanks, have a great day
I really liked your post
Very cool
nice blog, check mine out if you get a chance.
Top-notch
Great work over again! Thank you.
interesting article. thank you so much
if i instantiate the object in the handler of a button at that time what is the use of xtypes.
@joe,@Iwe: See ‘ref’ in the Extjs docs (e.g. on the Panel class). It (ref) will create a reference to the object when instantiated.
I was looking for what Joe was looking for, but I see he wasn’t answered. Can anyone tell us how to refer to an object that was created with xtype? I don’t want to use
I am writing an application which stores the Ext objects in a database I am retrieving the configuration from the server and rendering the objects. I want to manupulate the object configuration prior to adding them to the container. Is there a way of adding xtypes for things like?:
store: {
autoDestroy: true,
url: \’plants.xml\’,
reader: {
record: \’plant\’,
fields: [
{name: \’common\’, type: \’string\’},
]
}),
I\’m string to lazy render all of the components. I\’ve tried :
Ext.reg(\’xmlreader\’,Ext.data.XmlReader);
store: {
autoDestroy: true,
url: \’plants.xml\’,
reader: {
xtype: \’xmlreader\’,
record: \’plant\’,
fields: [
{name: \’common\’, type: \’string\’},
]
},
but to no avial… any thoughts?
great post overall, I love it
The example line got broken of, I was just referencing the line from your post. Here is the rest of my comment:
[example line from above(xtype…)], how can I call i.e. getSelectionModel() on mygrid?
Very clear description, thanks.
What I am still wondering though, ow to i call a function on the lazyly instantiated object?
As by the above example ({xtype:’mygrid
ad 2. Yes I was mistaken, I read pre ext3 where you write pre ext2.
ad 3. Ghe don’t get me wrong. I love extjs as well, and bought recently a license because I want to use this library. I only wonder how extjs1 worked then. Since the only way of greedy instantiation I can think of is something like the following
p = new SubPanel();
w = new Widget().registerAOnClickFunction(function (e) {p.show()}}
this is a waste indeed.
But why not simply
w = new Widget().registerAOnClickFunction(function (e) {new Panel.show()}}
There is no need to instantiate Panel beforehand, in global scope.
ad 4. It was just an example, definitely not Extjs. $ is (DOM) getElementById, the example I provide here is maybe clearer. Still not extjs, but it illustrates the concept.
🙂
1. Not necessarily. You can instantiate/render components when you need, the only difference is that pre-Ext-2.x doesn’t do it for you – you need to do it yourself.
2. Ext 3.x and Ext 2.x are conceptually same in this area.
3. No design mistake in Ext 2.x I know about. The reverse is true: Many ingenious concepts.
4. No idea what’s the line you posted does. What’s $? What .register does? Is it an Ext line?
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).
How is this different from Ext 3? Was there a design mistake in Ext2. I am inclined to think that lazy loading is what you get normally. Like here:
$(‘id3’).click.register(function(e) {new Panel().show()})
Just curious.
Thank you minamu1. I’m glad you like it.
Simple, precise, and to the point…brilliant!
thanks
Finally, a simple explanation..
Great! thank you for the clarification.