今天在帮一个兄弟检查一段自定义控件的代码时觉得他对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>.<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:

 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 vs. alias

  可以看到,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。

References

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

ExtJS in Review - xtype vs. alias的更多相关文章

  1. ExtJS组件的xtype属性列表

    ExtJS的应用界面是由很多小部件组合而成的,这些小部件被称作“组件(Component)”,所有组件都是Ext.Component的子类,Ext.Component提供了生命周期管理包括初始化.渲染 ...

  2. ExtJs xtype类型介绍

    自定义组件在定义的时候可以通过xtype配置为组件指定xtype短名称,此后创建对象可以通过xtype来创建自定义对象了,示例代码如下: Ext.define('MyApp.PressMeButton ...

  3. [EXTJS5学习笔记]第二十六节 在eclipse/myeclipse中使用sencha extjs的插件

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40507383 插件下载: http://download.csdn.net/detai ...

  4. ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览

    //plupload 集成 Ext.define('ux.plup.File', { extend: 'Ext.form.field.Text', xtype: 'plupFile', alias: ...

  5. ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2

    运行效果: 此文介绍了根据操作左侧菜单在右面板展示相应内容. 一.主页 先看一下跳转主页的方式:由在webapp根目录下的index.jsp跳转至demo的index.jsp 下面是demo的inde ...

  6. MyBatis批量删除 多态sql,构建in语句

    <!--==========================删除==================================== -->    <delete id=&quo ...

  7. 【ExtJS】关于alias和xtype

    alias 在api里的解释为:别名 类名称简短的别名列表.多数用于定义xtypes Ext.define('MyApp.Panel', { extend: 'Ext.panel.Panel', al ...

  8. [转]ExtJs:xtype的含义

    原文地址:http://www.cnblogs.com/timy/archive/2010/08/13/1799111.html 根据我在EXT论坛上的观察,xtype用起来的时候疑惑会比较多.甚至有 ...

  9. ExtJs中xtype与组件类的对应表

    from:http://blog.163.com/jx_dream/blog/static/117056627201223091021410/ 核心提示:我们在使用 ExtJs 创建组件时最容易理解的 ...

随机推荐

  1. 我是如何在SQLServer中处理每天四亿三千万记录的

    首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...

  2. jQuery学习之路(6)- 简单的表格应用

    ▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...

  3. OpenCV模板匹配算法详解

    1 理论介绍 模板匹配是在一幅图像中寻找一个特定目标的方法之一,这种方法的原理非常简单,遍历图像中的每一个可能的位置,比较各处与模板是否“相似”,当相似度足够高时,就认为找到了我们的目标.OpenCV ...

  4. 在centos7上安装ClamAV杀毒,并杀毒(centos随机英文10字母)成功

    前言 上传文件的时候发现总是失败,查看top发现有个进程一直cpu占用80%以上,而且名称还是随机数.kill之后,一会儿又重新生成了.突然发现居然没有在服务端杀毒的经历.在此处补齐. 安装clama ...

  5. 代码的坏味道(19)——狎昵关系(Inappropriate Intimacy)

    坏味道--狎昵关系(Inappropriate Intimacy) 特征 一个类大量使用另一个类的内部字段和方法. 问题原因 类和类之间应该尽量少的感知彼此(减少耦合).这样的类更容易维护和复用. 解 ...

  6. 微信小程序的机会在于重新理解群组与二维码

    历时一年,唯一一个尚未发布就获得Pony Ma与Allen Zhang站台的产品:微信小程序,将于2017年1月9日正式上线了.我很期待.唯一要警惕的是:防止长考出臭棋. 在上线前夕,我对于如何借助小 ...

  7. 通过sails和阿里大于实现短信验证

    通过sails与阿里大于来实现注册短信验证码的发送,逻辑图如下 1.用户在客户端发送手机号给服务器,服务器接收到手机号,生成对应时间戳,随机四位数验证码 2.服务器将电话号码和验证码告诉阿里大于服务器 ...

  8. <程序员从入门到精通> -- How

    定位 自己才是职业生涯的管理者,想清楚自己的发展路径: 远期的理想是什么?近期的规划是什么?今日的任务和功课又是什么? 今日之任务或功课哪些有助于近期之规划的实现,而近期之规划是否有利于远期之理想? ...

  9. 开始webservice了

    一.WebService到底是什么 一言以蔽之:WebService是一种跨编程语言和跨操作系统平台的远程调用技术. 所谓跨编程语言和跨操作平台,就是说服务端程序采用java编写,客户端程序则可以采用 ...

  10. tg2015 信息传递 (洛谷p2661)

    题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一 ...