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的组件结构图, 还附有各个组件的说明, 希望大家喜欢, 大家快下呀....

评论

53 楼 tsliyangyang 2008-10-02  

好帖子，mark下，留作纪念。正想学习下

52 楼 x7t7 2008-09-25  

一个字，好，
谢谢版主的分享

51 楼 piratesir 2008-09-10  

地地道道地地道道地地道道地地道道

50 楼 Danielw 2008-08-19  

支持，支持

49 楼 just4you 2008-07-17  

写的不错，对我有帮助。

48 楼 cnetwei 2008-06-27  

key 写道

不错，目前正有一个项目需要用到EXT2.0，版本能不能介绍一下EXT里面怎么去调用Action？
支持！！

对于后台Action的调用可以通过AJAX，也可以通过FormPanel,还有很多的方式，如果有必要的话 你可以参考一下：http://www.iteye.com/topic/207901

47 楼 cnetwei 2008-06-27  

支持一下楼主。

另外：

kaki 写道

如果能够把EXT+DRW+SPRING整合在一起就好了。

最近我学习EXT的过程中 做了一个数据库浏览工具，就是使用了 EXT + SpringMVC，中间没有使用DRW 而仅仅是传递JSON。如果有兴趣的话 你可以关注一下：http://jdbexplorer.googlecode.com

46 楼 csy2008 2008-05-09  

不错，学习下，Exjs是很好的框架。

45 楼 ironicshuang 2008-04-23  

太好了，来点strusts的应用

44 楼 magicyang918 2008-01-29  

哎,大家都说是好帖,可我还是看不懂.还是太菜了啊.

43 楼 stormd 2008-01-24  

One Application One Page

42 楼 shocking2001 2008-01-24  

OAOP是什么，如何理解。在google上都没有找到。请帮忙解释下。

41 楼 taox 2008-01-15  

加油LZ，支持你了。

40 楼 magicyang918 2008-01-13  

好，我也刚开始学习EXT。
不好学啊。

39 楼 tonynju 2008-01-11  

支持一下 正在学习EXT

38 楼 kevin_liu 2008-01-11  

恩 公司最近正在推EXT， 有玩wicket 的兄弟碰个头来

37 楼 javaeye2008 2007-12-19  

呵呵  说的很好   不仅仅让我学习了EXTJS知识  而且让我对JSON有的更进一步的了解，非常感谢  希望继续加油为我们指点方向

36 楼 zhanjia 2007-12-11  

俺公司也用Ext, 而且还用的不少, 大伙努力啦, 用它不是最重要的, 研究源码才是目标!!

35 楼 stevenwang 2007-12-07  

分析的不错，不过我到处都搜索不到Ext.reg这个方法，不知道lz是从哪里看到这个用法和解释的，我现在正在研究Extjs提供的示例，总体感觉不够细致，难度偏大了点。
示例中对控件的用法讲的讲的透。
期待更好的研究文档面试。能够节省很多学习的时间。

34 楼 anxuening 2007-12-05  

很好，继续努力！！！！