Extjs深入理解（一） 关于xtype 与 new

关于xtype 与 new 

Extjs创建组件 有两种方式： 

  （1） 依据 xtype方式，通过 ComponentMgr 来创建 xtype 对应的组件

  (2)  new 组件的类

例如  创建一个panel 可以这样：

var panel = new Ext.Panel({author:'zhanglei'}); 

或者是用xtype的方式仅仅创建一段配置

var cfg = {xtype:'panel',author:'zhanglei'}.由 ComponentMgr在适当时候 来创建 xtype 对应的组件

推荐使用xtype方式。用xtype方式的好处是 可以延时实例化。以减小对浏览器资源不必要的消耗。用xtype的方式创建组件。实际上最终还是调用的new 方法创建的组件 。

用xtype的方式。在建立的类的时候 要将类注册一下。 例如 Ext.reg('panel', Ext.Panel); 

注册就是调用 registerType 方法 往 types属性里添加key/value对。

Ext.reg = Ext.ComponentMgr.registerType; 

Ext.ComponentMgr 下面有registerType 闭包方法：

 registerType : function(xtype, cls){
            types[xtype] = cls;
            cls.xtype = xtype;
        },

那么用xtype方式是在什么时候时候创建的组件实例呢？

在Chrome 的console 中 先用new 创建一个Panel .

var p = new Ext.Panel({zhl:'zhl'})

然后 调用 add方法增加一个xtype方式的Button。

p.add({xtype:'button',name:'btn3'}) 调试这句

堆栈中的add方法。panel的add方法继承自Ext.Container

堆栈中的lookupComponent方法。

堆栈中的creatComponent方法

堆栈中的create方法

可以看到此时的config  。此时的types属性（这里应该是已经注册过的所有的组件）中有个key是button。

堆栈中的Ext.Component。

当调用 Ext已经定义的方法时，要注意它的使用限制。有些参数是有要求的。