差沙的密码 -- SSHWSFC's code
阅读本Blog请自备塑料袋一只
posts - 14,  comments - 59,  trackbacks - 0
相信大家看了Ext2.0后, 印象最深的应该是Ext的组件模式,很好的规范了组件设计,用Manager的统一管理,也是很好的方式.下面简单分析一下Ext的组件结构.

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

   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文件的最后一行可以看到:

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


而在, ComponentMgr.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类, 恩,就在这个类里呢:

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


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

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


posted on 2007-10-20 20:01 差沙 阅读(7690) 评论(25)  编辑  收藏 所属分类: bew

FeedBack:
# re: Ext的组件结构分析,附Ext组件结构图
2007-10-20 21:34 | 海边沫沫
沙发  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2007-10-21 09:29 | thinkbase
我是在 javaeye 上看到这篇文章的, 很不错, 虽然我习惯潜水一般不回, 呵呵  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2007-10-21 13:04 | BeanSoft
多谢啊! 支持!  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2007-11-21 16:22 | fjpan2002
谢谢楼主了。  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2007-12-26 23:18 | 郑伟
大哥 附件在哪啊 ,小弟刚刚接触 ext 希望大哥 指点一二  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图[未登录]
2008-01-03 11:39 | aa
good  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图[未登录]
2008-02-18 10:44 | dd
good  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2008-02-22 13:01 | coder
谢谢了  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2008-03-11 10:02 | 路过
附件呢  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图[未登录]
2008-04-22 12:50 | lily
谢谢

  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图[未登录]
2008-05-05 13:22 | jason
附件,哪里  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图[未登录]
2008-05-10 17:05 | 天涯
附件呢?  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2008-05-21 15:50 | 夕颜
先顶顶 没看到附件``  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2008-06-05 15:23 | qwety
大哥,附件呢,我正需要啊  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2008-06-12 22:27 | khajuraho
很好,第一次看到ext就感觉很爽。谢谢楼主更详尽的描述。  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2008-06-23 13:33 | dengshengyx
haha  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图[未登录]
2008-07-07 20:10 | 啦啦啦
问下:
file 类型怎么弄  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2008-07-11 16:43 | eye
feichanghao  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2008-08-19 19:46 | 谢谢
好东西一定不能沉下去,UP UP UP UP UP UP UP   回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2008-10-26 22:20 |
good  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2008-10-26 22:20 |
怎么没有附件的啊!  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2008-11-28 09:07 | hjhj
mei you fjian  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2010-12-03 18:50 | alian
组件呢  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2012-08-06 11:46 | zds
真的很不错哦
  回复  更多评论
  
# re: Ext的组件结构分析,附Ext组件结构图
2013-04-03 17:10 | haha.
附件在哪里呀?  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
这家伙很懒,但起码还是写了一句话。

<2013年4月>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

常用链接

留言簿(8)

随笔分类

随笔档案

文章分类

搜索

  •  

最新评论

阅读排行榜

评论排行榜