今天在幫一個兄弟檢查一段自定義控件的代碼時覺得他對xtype以及alias的使用和ExtJS各示例代碼的使用有較多的不一致，而我自己也不是很清楚使用這兩個屬性時的最佳方法。因此在回家后整理出了這樣一篇文檔。一方面用來標準化我們自己的代碼，另一方面也共享給大家，畢竟對這兩個屬性進行詳細討論的資料幾乎沒有。

xtype

　　首先來看看xtype的定義。在ExtJS的官方文檔中是這樣對它進行定義的：

　　This property provides a shorter alternative to creating objects than using a full class name. Using xtype is the most common way to define component instances, especially in a container.

　　也就是說，在定義一個類的時候，如果我們指定了它的xtype，那么我們就可以通過這個xtype，而不是類型的全名來創建這些類型。例如對于下面的布局聲明：

1 items: [
2     Ext.create('Ext.form.field.Text', {
3         fieldLabel: 'Foo'
4     }),
5     ……
6 ]

　　其與以下使用xtype聲明的布局是等同的：

1 items: [
2     {
3         xtype: 'textfield',
4         fieldLabel: 'Foo'
5     },
6     ……..
7 ]

　　可以看到，在使用xtype的時候，我們可以不再標明類型的全名，進而減少了在使用它們時出錯的可能，降低了維護的成本。

　　而在定義一個類型的時候，我們可以指定該類型所具有的xtype：

1 Ext.define('MyApp.PressMeButton', {
2     extend: 'Ext.button.Button',
3     xtype: 'pressmebutton',
4     text: 'Press Me'
5 });

alias

　　而在文檔中，alias的定義則如下所示：

　　List of short aliases for class names. An alias consists of a namespace and a name concatenated by a period as <namespace>.<name>

namespace - The namespace describes what kind of alias this is and must be all lowercase.

name - The name of the alias which allows the lazy-instantiation via the alias. The name shouldn't contain any periods.

　　在一個類型定義中，我們可以指定它所使用的alias：

1 Ext.define('MyApp.CoolPanel', {
2     extend: 'Ext.panel.Panel',
3     alias: ['widget.coolpanel'],
4     title: 'Yeah!'
5 });

　　而對這個類型的使用也非常簡單，在xtype中標示該alias即可：

1 Ext.widget('panel', {
2     items: [
3         {xtype: 'coolpanel', html: 'Foo'},
4         {xtype: 'coolpanel', html: 'Bar'}
5     ]
6 });

xtype vs. alias

　　可以看到，xtype和alias有點像，是吧？那么它們兩個有什么區別，什么時候用xtype，什么時候用alias呢？

　　上面的示例也展示了一個比較有趣的事情，那就是通過alias所定義的別名“coolpanel”可以直接通過xtype引用。也就是說，xtype和alias實際上可以在一定程度上通用的。

　　最終我在ClassManager類的源碼中找到了一系列證據。簡單地說，xtype是存在于widget命名空間下的alias。如果為一個新的UI組成聲明了它的xtype，那么就等于在widget命名空間下為其聲明了一個alias。例如我們也可以通過下面的代碼定義剛剛看到的CoolPanel類：

1 Ext.define('MyApp.CoolPanel', {
2     extend: 'Ext.panel.Panel',
3     xtype: ‘coolpanel’,
4     title: 'Yeah!'
5 });

　　總的來說，為一個UI組成指定一個xtype實際上就等于為其指定一個在widget命名空間下的alias。但是alias所能覆蓋的類型范圍要比xtype廣得多。一個alias不僅僅可以用來聲明命名空間為widget的各個類型，更可以在plugin，proxy，layout等眾多命名空間下聲明類型。

　　而在Sencha論壇中，一位開發人員也解釋了為什么在alias已經存在的情況下定義一個額外的xtype。這僅僅是為了提高性能。在ExtJS的內部實現中常常需要將alias中的命名空間剝離才能得到所需要創建的widget類型。在xtype的幫助下，ExtJS可以擺脫掉耗時的字符串分析工作，從而提高性能。

　　因此在定義一個自定義widget的時候，我們應當使用xtype，而在定義其它組成時，我們就不得不使用alias了。由于所有的widget使用同一個命名空間，因此我們需要在為自定義widget指定xtype時標示一個前綴，例如在項目egoods中定義的一個自定義button的xtype就應為egoods-button。

References

　　本文章中所有示例均來自于ExtJS官方文檔：http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/