Ext JS:xtype 有什么用? [英] Ext JS: what is xtype good for?

问题描述

我看到 Ext JS 中有很多示例，其中不是实际创建 Ext JS 对象，而是传入具有 xtype 属性的对象文字.

I see there are lot's of examples in Ext JS where instead of actually creating Ext JS objects, an object literal with an xtype property is passed in.

这有什么用?如果无论如何要创建对象，性能增益(如果这是原因)在哪里?

What is this good for? Where is the performance gain (if that's the reason) if the object is going to be created anyway?

推荐答案

xtype 是识别特定组件的简写方式:panel = Ext.Panel、textfield = Ext.form.TextField 等.当你创建一个页面或表单时，你可以使用这些 xtypes 而不是比实例化对象.例如，

xtype is a shorthand way to identify particular components: panel = Ext.Panel, textfield = Ext.form.TextField, etc. When you create a page or a form, you may use these xtypes rather than instantiate objects. For example,

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

此外，以这种方式创建页面允许 Ext JS 延迟渲染页面.这就是您看到性能提升"的地方.Ext JS 不是在应用加载时创建大量组件，而是在用户需要查看组件时呈现它们.如果您只有一个页面，这没什么大不了的，但如果您利用选项卡或手风琴，许多页面最初是隐藏的，因此应用加载速度会更快.

Moreover, creating pages in this manner allows Ext JS to render lazily the page. This is where you see a "performance gain." Instead of creating a large number of components when the app loads, Ext JS renders components when the user needs to see them. Not a big deal if you have one page, but if you exploit tabs or an accordion, many pages are initially hidden and therefore the app will load more quickly.

此外，您可以创建和注册新组件以创建您选择的 xtype.Ext JS 同样会延迟渲染你的组件.

Furthermore, you may create and register new components creating xtypes of your choosing. Ext JS will similarly render your components lazily.

您还可以通过 ID 检索组件.由于您的组件(以及 Ext JS 组件)可能会提供一系列不错的行为，因此有时搜索和检索组件而不是简单的 DOM 元素或节点会更方便.

You may also retrieve components by ID. Since your component (as well as the Ext JS components) may provide a bunch of nice behavior, it is sometimes convenient to search for and retrieve a component rather than a simple DOM element or node.

简而言之，xtypes 标识组件，组件是 Ext JS 的一个关键方面.

In short, xtypes identify components and components are a key aspect of Ext JS.

这篇关于Ext JS:xtype 有什么用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！