2007-10-20

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

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

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

js 代码
  1. var formPanel = new Ext.form.FormPanel({
  2. items: [{
  3. xtype: 'hidden',
  4. name: 'domainId'
  5. },{
  6. fieldLabel: '姓名',
  7. name: 'name',
  8. allowBlank:false
  9. },{
  10. fieldLabel: '权限',
  11. xtype: 'combo',
  12. name: 'auth'
  13. },{
  14. fieldLabel: '帐号',
  15. name: 'account'
  16. },{
  17. fieldLabel: 'Email',
  18. name: 'email',
  19. vtype:'email'
  20. },{
  21. fieldLabel: '启用',
  22. xtype: 'checkbox',
  23. name: 'enabled'
  24. }
  25. ]
  26. });
如此这样就能实现一个包含了很多元素的表单, items里面定义了表单要显示的输入框等组件,但是items里面仅仅是简单的json对象,怎么能显示出来各种不同的表单元素呢?

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

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

js 代码
  1. Ext.reg('box', Ext.BoxComponent);

而在, ComponentMgr.js文件里
js 代码
  1. // private
  2. registerType : function(xtype, cls){
  3. types[xtype] = cls;
  4. cls.xtype = xtype;
  5. },
  7. // private
  8. create : function(config, defaultType){
  9. return new types[config.xtype || defaultType](config);
  10. }
  11. };
  12. }();
  14. // this will be called a lot internally,
  15. // shorthand to keep the bytes down
  16. Ext.reg = Ext.ComponentMgr.registerType;

其实是执行了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的组件结构图, 还附有各个组件的说明, 希望大家喜欢, 大家快下呀....
  • Dcdf3f06-7fab-4520-892f-10497703a8bc-thumb
  • 描述: Ext的组件结构图
  • 大小: 289.3 KB
评论
fanmaoyang 2008-07-07
正在学习EXTJS,很不错的文章，帮助很大
cnetwei 2008-06-27
key 写道
不错，目前正有一个项目需要用到EXT2.0，版本能不能介绍一下EXT里面怎么去调用Action？
支持！！


对于后台Action的调用可以通过AJAX，也可以通过FormPanel,还有很多的方式，如果有必要的话 你可以参考一下：http://www.javaeye.com/topic/207901
cnetwei 2008-06-27
支持一下楼主。

另外：
kaki 写道
如果能够把EXT+DRW+SPRING整合在一起就好了。


最近我学习EXT的过程中 做了一个数据库浏览工具，就是使用了 EXT + SpringMVC，中间没有使用DRW 而仅仅是传递JSON。如果有兴趣的话 你可以关注一下：http://jdbexplorer.googlecode.com
stormd 2008-01-24
One Application One Page
kevin_liu 2008-01-11
恩 公司最近正在推EXT， 有玩wicket 的兄弟碰个头来
javaeye2008 2007-12-19
呵呵 说的很好 不仅仅让我学习了EXTJS知识 而且让我对JSON有的更进一步的了解，非常感谢 希望继续加油为我们指点方向
zhanjia 2007-12-11
俺公司也用Ext, 而且还用的不少, 大伙努力啦, 用它不是最重要的, 研究源码才是目标!!
stevenwang 2007-12-07
分析的不错，不过我到处都搜索不到Ext.reg这个方法，不知道lz是从哪里看到这个用法和解释的，我现在正在研究Extjs提供的示例，总体感觉不够细致，难度偏大了点。
示例中对控件的用法讲的讲的透。
期待更好的研究文档面试。能够节省很多学习的时间。
anxuening 2007-12-05
很好，继续努力！！！！
stevenwang 2007-12-04
不错，发表处女贴了。
我正在搞Extjs
庄严 2007-11-28
[quote="tttttt"]真的很需要一张系统结构图，prototype的结构图就很牛逼！！[/quote]
key 2007-11-15
不错，目前正有一个项目需要用到EXT2.0，版本能不能介绍一下EXT里面怎么去调用Action？
支持！！
tttttt 2007-11-13
真的很需要一张系统结构图，prototype的结构图就很牛逼！！
rayking 2007-11-11
不错，相当不错，对于初学有个大体理解了~~
cnpollux 2007-10-27
不是说ext会比较慢么？
hanbiaoo 2007-10-26
kaki 写道
如果能够把EXT+DRW+SPRING整合在一起就好了。


关于Ext+DWR+Spring，可以看这篇文章http://blog.totodo.com/labels/ext%20dwr%20spring.html。
kaki 2007-10-25
如果能够把EXT+DRW+SPRING整合在一起就好了。
allenleex 2007-10-25
同道中人，我也开始研究Ext2了，很多问题需要解决。
hellboy 2007-10-24
公司项目正在使用EXT，非常常谢谢你的分析，对我很有帮助
antonyup_2006 2007-10-24
ext做的效果确实很漂亮,很有钢切的感觉,不过要做的很漂亮,javasript的功底要好,并且json这类数据载体要熟悉!当然xml也可以表示.
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

差沙
搜索本博客
最近加入圈子
存档
最新评论