Ext2的 组件X类型 XTypes

xTypes是Ext 2.0中新的概念,被认为是Ext特定组件类型。可用的xtype摘要可在 Component class 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一直是隐藏的),那么按钮就不会被创建,不会消耗任何资源了。

你可能感兴趣的:(JavaScript,浏览器,ext)