组件的X类型 XTypes

最新推荐文章于 2025-01-27 23:13:42 发布

java375378563

最新推荐文章于 2025-01-27 23:13:42 发布

阅读量722

点赞数 1

文章标签： hierarchy 浏览器 javascript class 扩展 button

本文介绍了Ext2.0中的XTypes概念及其在组件创建和渲染优化中的作用，并详细解释了BoxComponent基类如何实现一致的跨浏览器箱子模型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XTypes是Ext 2.0中新的概念，被认为是Ext组件的特定类型。可用的xtype摘要可在 Component类API开始的地方找到。与一般JavaScript对象用法相似，XTypes可用于查找或比较组件对象，如isXType和getXType的方法。你亦可以列出任意组件的xtpye层次表，用方法getXTypes。

然而，如何把Xtypes用于优化组件的创建和渲染过程才是XTypes发挥威力的地方。通过指定一个xtype的配置对象的写法，可隐式声明的方式创建组件，使得如果没有渲染的需要就只是一个对象而免去实例化的步骤，这时不仅渲染的动作是延时的，而且创建实际对象的这一步也是延时的，从而节省了内存和资源。在复杂的布局中，这种性能上的改进尤为明显。

代码

//显式创建所容纳的组件
var panel = new Ext.Panel({
...
items: [
new Ext.Button({
text: 'OK'
})
]
};
//使用xtype创建
var panel = new Ext.Panel({
...
items: [{
xtype: 'button',
text: 'OK'
}]
};

第一个例子中，面板初始化的同时，按钮总是会立即被创建的。如果加入较多的组件，这种方法很可能界面的渲染速度。第二例子中，按钮直到面板真正在浏览器上显示才会被创建和渲染。

如果面板从未显示（例如有个tab一直是隐藏的），那么按钮就不会被创建，不会消耗任何资源了。
BoxComponent

BoxComponent 是另外一个重要的基类，该类从组件Component扩展，为任何要进行可视渲染和参与布局的组件提供了一致的、跨浏览器的箱子模型（Box Model）实现。BoxComponent负责调节大小和定位，自动处理各浏览器之间的差异，如外/内补丁、边框的问题，形成一个统一的箱子模型，以支持各种浏览器。2.0的一切容器类（container）扩展自BoxComponent。

容器模型Container Model
Ext 2.0 Component/Container Class Hierarchy
Ext 2.0 Component/Container Class Hierarchy
容器 Container

一个组件如果有包含其它的组件，那么，容器Container便是这个组件奠基之石。该类提供了布局方面和调节大小、嵌套组所需的逻辑，并且提供一个基础性的加入组件协调机制。容器类不应该直接使用，其目的在于为一切可视的容器组件提供一个基类。