ExtJS:XType有什么用?

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

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

此外 ,以这种方式创建页面允许ext js to render lazily the page . 这就是您看到“性能提升”的地方,ExtJS在应用程序加载时不会创建大量组件,而是在用户需要查看组件时呈现这些组件。如果你只有一个页面,那就没什么大不了的了,但是如果你利用标签或者手风琴,很多页面最初都是隐藏的,因此应用程序的加载速度会更快。

此外,您可以创建 并登记 创建您选择的Xtypes的新组件。ext-js同样会延迟地呈现组件。

您还可以按ID检索组件。由于您的组件(以及ExtJS组件)可能提供了一系列良好的行为,因此有时搜索和检索组件而不是简单的DOM元素或节点很方便。

简而言之,Xtypes标识组件和组件是ExtJS的一个关键方面。

我不熟悉sencha/ext-js,但我认为在这一点上,只有UI组件才有一个简短定义标识符字符串的奇怪概念必须满足遗留用户的需求。

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

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

检查以下sencha touch的Xtype到类名映射示例:

• video - Ext. Video
  好吧,这是有意义的-小写版本的“class”名称
• carousel -外部转盘。转盘
  这里的图案相同
• carouselindicator -外部转盘指示器
  嗯,好吧-我们也要一个包裹
• navigationview -外部导航视图
  再一次在这里
• datepicker -外部选取器日期
  好的,wtf?

上面的一些论点 对于 xtype允许组件的延迟实例化。我认为这是完全不相关的——允许延迟实例化的是sencha/ext js支持字符串标识符的规范,而不是视图层次结构中的实例化组件。

将一个特定的字符串映射到一个特定的组件(稍后可能会被实例化)是完全任意的——在sencha/ext-js的情况下,不幸的是很愚蠢(参见上面的示例)。

至少要遵循一个合理的模式-例如,为什么一个外部标签不能有一个“xtype”的 Label ?太简单了?

事实上,我知道原因——这是因为它们使Xtype名称可读性很好——有许多重复的类名不起作用(ext.panel和ext.tab.panel),以及 pickerDate 听起来很愚蠢。

但我仍然不喜欢它-这是一个奇怪的,不一致的捷径,模糊了更多的帮助。

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

{ itemID:'myObject', xtype:'myclass' … }

然后你可以找到它 getComponent() 就像在

this.getComponent('myObject');

如果您声明一个类并给它一个xtype,您以后可以用 Ext.ComponentQuery.query()

例如:

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

在代码后面,如果您这样做:

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

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

Xtypes的另一个优点是,如果您移动类(例如,在“view”下添加另一个子目录: MyApp.view.button.MyButton ,则组件查询仍然可以保持不变,因为XType没有更改。一旦项目变大,您将开始创建子目录并四处移动类。

安 xtype 只是为表示类而指定的名称。这是一个 在中使用时不需要实例化的定义对象 应用程序的任何部分。

在注册时 X型 我们只使用以下语法: Ext.reg(<xtype name>,<classname>) .但是,我们不使用 new 关键字,因为组件管理器将仅在需要时自动创建该类的实例,例如响应单击之类的事件。

我们不需要手动获取实例,因为在注册 X型 ,则“组件管理器”将自动为该类所代表的类创建一个实例。 X型 只有当它在应用程序中的任何地方使用时,或者如果不在其他地方使用,它只是不实例化该类。组件管理器运行此代码:

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

X型 当 Ext.Ready 跑。但是,新的 Ext.Container() 将在以下情况下创建所有实例 准备就绪 跑。所以,使用 X型 对于大型应用程序来说是智能的,可以清除垃圾对象。

ext中的xtypes不用于性能。它便于编码。借助Xtype代码,代码变得更短、易于阅读和理解,尤其是当您正在创建一个ext.form.formpanel并且它有许多文本区域、日期字段和组合框等时…例如:当表单的每个日期字段都必须具有“d.m.y”格式时,它很有用,您不需要分别向每个日期字段写入“d.m.y”格式,只需向表单配置对象写入默认值:格式:'d.m.y'…有很多情况下,XType会缩短代码…

总之:这是为了便于编码…