Extjs xtype 深入了解

最新推荐文章于 2012-12-13 09:50:08 发布

最新推荐文章于 2012-12-13 09:50:08 发布 · 233 阅读

JspAndFaceWeb 专栏收录该内容

66 篇文章

订阅专栏

本文总结了Extjs中xtype的概念及其在内存节约、加快浏览器运行速度方面的优势，详细解释了xtype如何通过延迟实例化提高效率，并深入探讨了Extjs组件创建的基本流程。

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

做Extjs有一段时间了，遇到了各种问题，现在我对xtype 做一下总结和基本的说明

xtype 就是Extjs 用于创建对象的一种形式

就比如xtype：'button' 就会创建Button对象似的

但这些xtype是谁来管理的，在看了源代码和大量实践后，发现

'Ext.ComponentManager‘

是管理xtype和component对象的

在这个里面我们可以很轻松的发现，extjs是会先把messagebox相应的component都加载进来，在进行你定义的xtype处理的

xtype到底有什么好处那？

生成对象的代码如下：

create: function(component, defaultType){
        if (component instanceof Ext.AbstractComponent) {
            return component;
        }
        else if (Ext.isString(component)) {
            return Ext.createByAlias('widget.' + component);
        }
        else {
            var type = component.xtype || defaultType,
                config = component;
            
            return Ext.createByAlias('widget.' + type, config);
        }
    },

1.内存节约

2.加快browser运行速度

其实可以这样说，这种方式就是延迟实例化

很明了吧

extjs的工作基本流程是

1.实例化

2.渲染

3.显示

上面xtype延迟实例化

那么可以想象，如果你用Ext.create或者new对象的形式，创建extjs component 那么

xtype的属性是在上面定义的组件显示的时候才会被创建然后渲染，显示。

这就是很多人不明白的extjs 组件创建流程