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 to render lazily the page。这是您看到“性能提升”的地方。当应用程序加载时，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'name
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不能有{x}“{1}}？太简单了？

实际上我知道为什么 - 这是因为它们使得xtype名称读得很好 - 有许多重复的类名不起作用（Ext.Panel和Ext.tab.Panel），而Label只会声音愚蠢。

但我仍然不喜欢它 - 这是一个奇怪的小不一致的快捷方式，它比它有助于混淆。

Answer 3

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

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

然后您可以使用

中的getComponent()找到它

this.getComponent('myObject');

Answer 4

如果您声明一个类并为其指定xtype，则可以稍后使用Ext.ComponentQuery.query()

进行查询

例如：

Ext.create('MyApp.view.MyButton', {
    xtype: 'mybutton',
    .....
});

稍后在您的代码中，如果您这样做：

var buttonArray = Ext.ComponentQuery.query('mybutton');

然后buttonArray将包含该类类型的组件数组。如果您以内联方式创建组件，则组件查询将更加复杂。

xtypes的另一个优点是，如果你移动你的类（让我们说，你在＆＃34下添加另一个子目录;查看＆＃34;：MyApp.view.button.MyButton），那么你的组件查询仍然可以保持不变，因为你的xtype没有变化。一旦项目变大，您将开始创建子目录并移动类。

Answer 5

xtype只是一个代表一个类的名称。它是一个定义对象，在使用时不需要实例化申请的任何部分。

注册xtype时，我们只使用以下语法：Ext.reg(<xtype name>,<classname>)。但是，我们不会将new关键字与类名一起使用，因为Component Mgr将仅在需要时自动创建此类的实例。响应点击等事件。

我们不需要手动获取实例，因为在注册xtype之后，'Component Mgr'将自动为该xtype重新创建的类创建一个实例，只要它在任何地方使用在应用程序中，如果没有在其他地方使用它，它根本就不会实例化该类。 Component Mgr运行以下代码：

create : function(config, defaultType){
    return new types[config.xtype || defaultType](config);
}

xtype在Ext.Ready运行时不实例化该类。但是，新的Ext.Container()将在Ext.Ready运行时创建所有实例。因此，使用xtype对于大型应用程序来说是智能的，以摆脱垃圾对象。

Ext JS：什么是xtype有用？

5 个答案: