Ext的组件结构分析,附Ext组件结构图

相信大家看了Ext2.0后, 印象最深的应该是Ext的组件模式,很好的规范了组件设计,用Manager的统一管理,也是很好的方式.下面简单分析一下Ext的组件结构.

Ext的所有组件都是扩展于Ext.Component, 而后子类扩展和集成形成了一个单根的组件树.
Ext中使用组件的方式很不一样,可以看一个例子.

js 代码

var formPanel = new Ext.form.FormPanel({
      items: [{
                xtype: 'hidden',
                name: 'domainId'
            },{
                fieldLabel: '姓名',
                name: 'name',
                allowBlank:false
            },{
                fieldLabel: '权限',
                xtype: 'combo',
                name: 'auth'
            },{
                fieldLabel: '帐号',
                name: 'account'
            },{
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            },{
                fieldLabel: '启用',
                xtype: 'checkbox',
                name: 'enabled'
            }
        ]
});

如此这样就能实现一个包含了很多元素的表单, items里面定义了表单要显示的输入框等组件,但是items里面仅仅是简单的json对象,怎么能显示出来各种不同的表单元素呢?

我们注意到items的每一个元素几乎都有一个xtype属性,这个xtype属性就是描述组件类的关键.

其实Ext里面的组件(Panel, Form Datepicker等等), 在定义完Class之后, 都会把自己注册到Ext.ComponentMgr里面. 简单看一个box的组件, 在BoxComponent.js文件的最后一行可以看到:

js 代码

Ext.reg('box', Ext.BoxComponent);

而在, ComponentMgr.js文件里

js 代码

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

        // private
        create : function(config, defaultType){
            return new types[config.xtype || defaultType](config);
        }
    };
}();

// this will be called a lot internally,
// shorthand to keep the bytes down
Ext.reg = Ext.ComponentMgr.registerType;

其实是执行了registerType 这个方法,方法很简单, 把xtype这个名字和对应的cls放到types里面, 而后看到create 我们应该会明白了, 以后想创建组件的时候,就调用 create({xtype: 'box'}) 就OK了

那么我们看看items里面的元素是怎么创建的吧, form的继承树中有一个Ext.Container类, 恩,就在这个类里呢:

js 代码

// private
lookupComponent : function(comp){
    if(typeof comp == 'string'){
        return Ext.ComponentMgr.get(comp);
    }else if(!comp.events){
        return this.createComponent(comp);
    }
    return comp;
},

// private
createComponent : function(config){
    return Ext.ComponentMgr.create(config, this.defaultType);
},

恩,基本就是这样了, 希望对大家理解Ext有所帮助

/************************************************/
附件是我弄的一个Ext的组件结构图, 还附有各个组件的说明, 希望大家喜欢, 大家快下呀....

评论

13 楼 hellboy 2007-10-24  

公司项目正在使用EXT，非常常谢谢你的分析，对我很有帮助

12 楼 antonyup_2006 2007-10-24  

ext做的效果确实很漂亮,很有钢切的感觉,不过要做的很漂亮,javasript的功底要好,并且json这类数据载体要熟悉!当然xml也可以表示.

11 楼 duan0175 2007-10-24  

不错不错，慢慢研究

10 楼 jljlpch 2007-10-24  

听说ext2.0是swing的风格。现在一看，发现在大学里花那么时间学习swing原来没有错。在ext2中用到了。当然在wicket中也用到。
我也正想分析一下ext2的源码。好东西，谢谢分享。

9 楼 cheng022074 2007-10-23  

不错，不错，相当不错，要不是，现在正在做ExtJS的项目的话，我也想好好地扩展一下Ext的功能，可惜现在任务太紧了

8 楼 linxizeng 2007-10-22  

不错的介绍。。。虽然现在不用..

7 楼 thinger 2007-10-22  

层次结构比较清楚了..确实如某位所说,越研究越有趣..

6 楼 crabboy 2007-10-22  

这样的文章怎么不鼓励呢！

5 楼 差沙 2007-10-21  

jianfeng008cn 写道

请把自己扩展的都作说明

只有deskview的是自己扩展的， 这个树是动态生成的， 所以自己扩展的也搞了进去，还好只有一个

4 楼 jianfeng008cn 2007-10-21  

请把自己扩展的都作说明

3 楼 lianwu 2007-10-21  

支持哈，能不能来点ext2.0调用action的例子

2 楼 Sean220 2007-10-21  

不错的分享，EXT这样有内容的帖子太少了

1 楼 差沙 2007-10-21  

虽然没有人回,但还是打算继续研究下去,接下来准备分析一下layout