Ext JS:什么是xtype有用？

Question

我看到Ext JS中有很多例子,而不是实际创建Ext JS对象,xtype而是传入一个带有属性的对象文字.

这有什么用？如果要创建对象,性能增益在哪里(如果这是原因)？

Answer 1

xtype是识别特定组件的简便方法:panel= Ext.Panel,textfield= Ext.form.TextField等.创建页面或表单时,可以使用这些xtypes而不是实例化对象.例如,

items: [{
   xtype: 'textfield',
   autoWidth: true,
   fieldLabel: 'something'
}]

而且,以这种方式创建页面允许Ext JS 懒惰地呈现页面.这是您看到"性能提升"的地方.当应用程序加载时,Ext JS不会创建大量组件,而是在用户需要查看组件时呈现组件.如果您有一个页面,这不是什么大问题,但如果您利用标签或手风琴,最初会隐藏许多页面,因此应用程序将加载更快.

此外,您可以创建并注册创建所选xtypes的新组件.Ext JS将同样懒惰地渲染您的组件.

您还可以按ID检索组件.由于您的组件(以及Ext JS组件)可能提供了许多不错的行为,因此有时可以方便地搜索和检索组件而不是简单的DOM元素或节点.

简而言之,xtypes识别组件和组件是Ext JS的一个关键方面.

Answer 2

我是Sencha/Ext JS的新手,但我认为在这一点上,只有UI组件的简写定义标识符字符串的奇怪概念必须是满足传统用户.

在这里查看"xtypes列表":http://docs.sencha.com/touch/2-0/#!/guide/components

是否有充分的理由使用与"类"名称相似但不完全相同的字符串标识符作为速记定义标识符？我不这么认为.

检查Sencha touch的一些xtype到类名映射的以下示例:

• video- Ext.Video
  好的这种有道理 - 小写版的'class'这个名字
• carousel- Ext.carousel.Carousel
  这里的模式相同
• carouselindicator- Ext.carousel.Indicator
  嗯,好的 - 我们也会包含一个包
• navigationview- Ext.navigation.View
  再次在这里
• datepicker- Ext.picker.Date
  好的,wtf？

上面针对 xtype的一些论点是它允许延迟实例化组件.我认为这完全不相关 - 允许延迟实例化的事实是Sencha/Ext JS支持字符串标识符的规范来代替视图层次结构中的实例化组件.

将特定字符串映射到可能稍后实例化的特定组件是完全任意的 - 在Sencha/Ext JS的情况下,遗憾的是愚蠢(参见上面的示例).

至少只是遵循一个明智的模式 - 例如为什么Ext.Label不能有一个"xtype" Label？太简单？

实际上我知道为什么 - 这是因为它们使得xtype名称读得很好 - 有许多重复的类名称不起作用(Ext.Panel和Ext.tab.Panel),并且pickerDate只是听起来很愚蠢.

但我仍然不喜欢它 - 这是一个奇怪的小不一致的快捷方式,混淆了它比帮助更多.