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

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

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

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

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

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


而在, ComponentMgr.js文件里

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

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

js 代码

1. // private
2. lookupComponent : function(comp){
3. if(typeof comp == 'string'){
4. return Ext.ComponentMgr.get(comp);
5. }else if(!comp.events){
6. return this.createComponent(comp);
7. }
8. return comp;
9. },
11. // private
12. createComponent : function(config){
13. return Ext.ComponentMgr.create(config, this.defaultType);
14. },

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

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

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

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

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

请把自己扩展的都作说明

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

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

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

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

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