Ext JS: what is xtype good for?

Question

I see there are lot's of examples in Ext JS where instead of actually creating Ext JS objects, an object literal with an xtype property is passed in.

What is this good for? Where is the performance gain (if that's the reason) if the object is going to be created anyway?

Answer 1

xtype is a shorthand way to identify particular components: panel = Ext.Panel, textfield = Ext.form.TextField, etc. When you create a page or a form, you may use these xtypes rather than instantiate objects. For example,

items: [{    xtype: 'textfield',    autoWidth: true,    fieldLabel: 'something' }] 

Moreover, creating pages in this manner allows Ext JS to render lazily the page. This is where you see a "performance gain." Instead of creating a large number of components when the app loads, Ext JS renders components when the user needs to see them. Not a big deal if you have one page, but if you exploit tabs or an accordion, many pages are initially hidden and therefore the app will load more quickly.

Furthermore, you may create and register new components creating xtypes of your choosing. Ext JS will similarly render your components lazily.

You may also retrieve components by ID. Since your component (as well as the Ext JS components) may provide a bunch of nice behavior, it is sometimes convenient to search for and retrieve a component rather than a simple DOM element or node.

In short, xtypes identify components and components are a key aspect of Ext JS.