Ext JS：xtype有什么作用？

Question

Ext JS：xtype有什么作用？

extjs

29

我发现在Ext JS的很多示例中，传递一个带有xtype属性的对象字面量，而不是实际创建Ext JS对象。

这有什么好处？如果对象最终还是要被创建，那么这样做是否能提高性能？

- flybywire

5个回答

8

我是Sencha / Ext JS的新手，但我认为现在仅针对UI组件具有简写定义标识符字符串的奇怪概念必须满足传统用户。

请查看此处的“xtype列表”：http://docs.sencha.com/touch/2-0/#!/guide/components 是否有任何好的理由使用与“class”名称不完全相同的字符串标识符作为简写定义标识符？我不这么认为。

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

- video - Ext.Video - carousel - Ext.carousel.Carousel - carouselindicator - Ext.carousel.Indicator - navigationview - Ext.navigation.View - datepicker - Ext.picker.Date 一些支持xtype的参数是它允许组件的延迟实例化。我认为这完全无关紧要 - 允许延迟实例化的是Sencha / Ext JS支持在视图层次结构中指定字符串标识符代替已实例化的组件的事实。

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

至少只需遵循合理的模式 - 例如，为什么Ext.Label不能具有“Label”的“xtype”？太简单了吗？

实际上我知道为什么 - 这是因为他们制作了易于阅读的xtype名称 - 有许多重复的类名无法使用（例如Ext.Panel和Ext.tab.Panel），而pickerDate只是听起来很愚蠢。

但我仍然不喜欢它 - 它是一个奇怪的小不一致的快捷方式，比帮助更加模糊。

- sksizer

3

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

{ itemId: 'myObject', xtype: 'myClass' ... }

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

this.getComponent('myObject');

- lwe

如果您使用Ext.ComponenQuery.query('myClass')[0]，那么您甚至不需要添加itemId。需要索引[0]是因为组件查询始终返回一个数组。 - Patrick Chu

2

如果您声明一个类并给它一个xtype，那么您可以在以后使用Ext.ComponentQuery.query()进行查询。

例如：

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

在您的代码中，如果您执行以下操作：

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

如果你创建组件时采用内联方式，那么 buttonArray 将包含该类类型的组件数组。使用 xtype 的另一个优点是，如果你移动了类（比如，在 "view" 下添加了另一个子目录：MyApp.view.button.MyButton），那么你的组件查询仍然可以保持不变，因为 xtype 没有改变。一旦你的项目变得庞大，你将开始创建子目录并移动类。

- Patrick Chu

1

xtype 是一个简单的名称，用于表示一个类。它是一个定义对象，在应用程序的任何部分使用时不需要实例化。

在注册 xtype 时，我们只需使用这个语法：Ext.reg(<xtype name>,<classname>)。但是，我们不使用类名和 new 关键字，因为组件管理器将自动创建该类的实例，仅在需要时例如响应点击事件。

我们不需要手动获取实例，因为在注册了 xtype 后，“组件管理器”将自动为该 xtype 所代表的类创建一个实例，仅当它在应用程序中的其他地方使用时，或者如果没有在其他地方使用，则不会实例化该类。组件管理器运行此代码：

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

xtype在Ext.Ready运行时不会实例化类。但是，当Ext.Ready运行时，新的Ext.Container()将创建所有实例。因此，在大型应用程序中使用xtype能够智能地消除垃圾对象。

- Mr.Kool

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Upperstage · Accepted Answer

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

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

此外，以这种方式创建页面可以使 Ext JS 懒加载页面。这就是你看到的“性能增益”。与在应用程序加载时创建大量组件不同，Ext JS 仅在用户需要查看它们时渲染组件。如果您利用选项卡或手风琴，则会有许多页面最初处于隐藏状态，因此应用程序将更快地加载。

此外，您可以创建并注册新组件，创建自己选择的 xtype。 Ext JS 类似地惰性地呈现您的组件。

您还可以通过 ID 检索组件。由于您的组件（以及 Ext JS 组件）可能提供一些不错的行为，所以有时查找和检索组件而不是简单的 DOM 元素或节点非常方便。

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