Ext : xtype有什么好处？

Question

我看到在Ext中有很多例子，它不是实际创建Ext对象，而是传入一个具有xtype属性的对象文字。

这有什么好处呢？如果无论如何都要创建对象，那么性能提升在哪里(如果这是原因)？

Answer 1

xtype是标识特定组件的一种快捷方式：panel = Ext.Panel、textfield = Ext.form.TextField等。在创建页面或表单时，可以使用这些xtypes而不是实例化对象。例如,

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

此外，以这种方式创建页面允许 JS to render lazily the page。这就是你看到“性能提升”的地方。Ext JS在用户需要查看组件时呈现组件，而不是在应用程序加载时创建大量组件。如果你只有一个页面，这没什么大不了的，但如果你使用标签或折叠板，很多页面最初是隐藏的，因此应用程序的加载速度会更快。

此外，您可以创建并注册新组件，创建您选择的xtype。Ext JS同样会延迟呈现您的组件。

由于您的组件(以及Ext组件)可能提供一系列良好的行为，因此有时搜索和检索组件比搜索和检索简单的DOM元素或节点更方便。

简而言之，xtype标识组件，而组件是Ext的一个关键方面。

Answer 2

我是Sencha/Ext的新手，但我认为在这一点上，只为UI组件提供速记定义标识符串的奇怪想法是为了满足旧用户。

看看这里的“xtype列表”：http://docs.sencha.com/touch/2-0/#!/guide/components

使用类似但不完全相同的字符串标识符作为"class“名称作为速记定义标识符，有什么好的理由吗？我不这样认为。

检查Sencha touch的一些xtype到类名映射的示例：

• video - Ext.Video

好的，这是有意义的- 'class‘name

• carousel - Ext.carousel.Carousel的小写版本

相同模式的here

• carouselindicator - Ext.carousel.Indicator

嗯，好的-我们将包含一个包too

• navigationview - Ext.navigation.View

再一次here

• datepicker - Ext.picker.Date

好的，wtf?

上面关于xtype的一些论点是，它允许组件的延迟实例化。我认为这是完全无关紧要的--允许延迟实例化的是Sencha/Ext支持字符串标识符的规范，而不是视图层次结构中的实例化组件。

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

至少遵循一个合理的模式-例如，为什么Ext.Label不能有Label的"xtype“？太简单了？

实际上，我知道为什么--因为他们做的xtype名字读起来很好--有很多重复的类名不起作用(Ext.Panel和Ext.tab.Panel)，而pickerDate听起来很愚蠢。

但我仍然不喜欢它--这是一个奇怪的、不一致的快捷方式，它使人困惑，而不是帮助。

Answer 3

我和乔问了同样的问题，但我找到了答案。如果使用xtype，一种方法是还在同一对象中指定一个itemId：

{ itemId：'myObject'，xtype：'myClass‘... }

然后您可以使用getComponent()找到它，如下所示

this.getComponent('myObject');