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

I'm new to Sencha/Ext JS but I think at this point the odd notion of having a shorthand definition identifier string for only UI components must be to satisfy legacy users.

Look at the "List of xtypes" here: http://docs.sencha.com/touch/2-0/#!/guide/components

Is there any good reason to use a similar-but-not-quite-the-same string identifier as the "class" name as the shorthand definition identifier? I don't think so.

Check the following sample of some xtype to class name mappings for Sencha touch:

• video - Ext.Video
  Ok this sort of makes sense - lowercase version of 'class' name
• carousel - Ext.carousel.Carousel
  Same pattern here
• carouselindicator - Ext.carousel.Indicator
  Um, ok - we'll include a package too
• navigationview - Ext.navigation.View
  And again here
• datepicker - Ext.picker.Date
  Ok, wtf?

Some of the arguments above for xtype were that it allowed deferred instantiation of components. I think that is completely irrelevant - what allows deferred instantiation is the fact that Sencha/Ext JS supports the specification of a string identifier in place of an instantiated component in a view hierarchy.

The mapping of a particular string to a particular component that might be instantiated later is completely arbitrary - and in the case of Sencha/Ext JS, unfortunately silly (see examples above).

At least just follow a sensible pattern - for example why couldn't a Ext.Label have an "xtype" of Label? Too simple?

In reality I know why - it's because they made xtype names that read well - there are many repeated class names that wouldn't work (Ext.Panel and Ext.tab.Panel), and pickerDate would just sound stupid.

But I still don't like it - it's an odd little inconsistent shortcut that obfuscates more than it helps.