ExtJS中xtype和alias的区别

今天在帮一个兄弟检查一段自定义控件的代码时觉得他对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，而不是类型的全名来创建这些类型。例如对于下面的布局声明：

items: [
    Ext.create('Ext.form.field.Text', {
        fieldLabel: 'Foo'
    }),
    ……
]

其与以下使用xtype声明的布局是等同的：

items: [
    {
        xtype: 'textfield',
        fieldLabel: 'Foo'
    },
    ……..
]

可以看到，在使用xtype的时候，我们可以不再标明类型的全名，进而减少了在使用它们时出错的可能，降低了维护的成本。

而在定义一个类型的时候，我们可以指定该类型所具有的xtype：

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

alias

而在文档中，alias的定义则如下所示：

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

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：

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

而对这个类型的使用也非常简单，在xtype中标示该alias即可：

Ext.widget('panel', {
    items: [
        {xtype: 'coolpanel', html: 'Foo'},
        {xtype: 'coolpanel', html: 'Bar'}
    ]
});

可以看到，xtype和alias有点像，是吧？那么它们两个有什么区别，什么时候用xtype，什么时候用alias呢？

上面的示例也展示了一个比较有趣的事情，那就是通过alias所定义的别名“coolpanel”可以直接通过xtype引用。也就是说，xtype和alias实际上可以在一定程度上通用的。

最终我在ClassManager类的源码中找到了一系列证据。简单地说，xtype是存在于widget命名空间下的alias。如果为一个新的UI组成声明了它的xtype，那么就等于在widget命名空间下为其声明了一个alias。例如我们也可以通过下面的代码定义刚刚看到的CoolPanel类：

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

总的来说，为一个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。

作者：loveis715

原文： https://www.cnblogs.com/loveis715/p/4423502.html