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

Answer 1

If you declare a class and give it an xtype, you can query it later with Ext.ComponentQuery.query()

For example:

Ext.create('MyApp.view.MyButton', {
    xtype: 'mybutton',
    .....
});

Later in your code, if you do:

var buttonArray = Ext.ComponentQuery.query('mybutton');

then buttonArray will contain an array of components of that class type. If you create components inline, your component query will be more complex.

Another advantage of xtypes is that if you move your classes around (let's say, you add another subdirectory under "view": MyApp.view.button.MyButton), then your component queries can still remain the same, since your xtype doesn't change. Once your project gets large, you will start creating subdirectories and moving classes around.