相信大家看了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 代码
-
- registerType : function(xtype, cls){
- types[xtype] = cls;
- cls.xtype = xtype;
- },
-
-
- create : function(config, defaultType){
- return new types[config.xtype || defaultType](config);
- }
- };
- }();
-
-
-
- Ext.reg = Ext.ComponentMgr.registerType;
其实是执行了
registerType 这个方法,方法很简单, 把xtype这个名字和对应的cls放到types里面, 而后看到create 我们应该会明白了, 以后想创建组件的时候,就调用 create({xtype: 'box'}) 就OK了
那么我们看看items里面的元素是怎么创建的吧, form的继承树中有一个Ext.Container类, 恩,就在这个类里呢:
js 代码
-
- lookupComponent : function(comp){
- if(typeof comp == 'string'){
- return Ext.ComponentMgr.get(comp);
- }else if(!comp.events){
- return this.createComponent(comp);
- }
- return comp;
- },
-
-
- createComponent : function(config){
- return Ext.ComponentMgr.create(config, this.defaultType);
- },
恩,基本就是这样了, 希望对大家理解Ext有所帮助
/************************************************/
附件是我弄的一个Ext的组件结构图, 还附有各个组件的说明, 希望大家喜欢, 大家快下呀....
- 描述: Ext的组件结构图
- 大小: 289.3 KB
分享到:
- 2007-10-20 18:20
- 浏览 10217
- 评论(53)
- 论坛回复 / 浏览 (27 / 31617)
- 查看更多
相关推荐
Ext 组件:Ext初学者必备 初学宝典 Ext组件概述
xtype Class box Ext.BoxComponent 具有边框属性的组件 Button Ext.Button 按钮 colorpalette Ext.ColorPalette 调色板 component Ext.Component 组件 container Ext.Container 容器
ExtJS的组件化开发,描述如何通过将ExtJS组装成组件供项目组调用
EXT 组件详解EXT 组件详解EXT 组件详解
Ext组件转化成JSF Ext组件转化成JSF ext组件转化成JSF Ext组件转化成JSF Ext组件转化成JSF ext组件转化成JSF
Ext UML图,Ext类结构图,学习Ext的可以看一下
EXT组件一些属性与方法(MessageBox)[文].pdf
Ext2.0组件,全组件和帮助手册,部分为中文帮助手册
Ext 2.2 所有类结构继承关系和类说明图
Ext组件精解,可以做出非常漂亮的界面,里面讲解详细,例子很多!!
Ext组件扩展包 - DateTime,非常实用漂亮的日历组件,希望大家喜欢。
环境:Windows XP sp3、Tomcat 6.0、IE 7、MyEclipse 5.5、Ext 3.2 使用步骤: 1、下载解压之后,使用IDE导入工程 2、发布到Web服务器、并且启动服务器 3、打开IE之后在地址输入:...
Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发...
1. 这个组件基于Ext4 只选择年份/月份的组件,在Ext4.1.1版本正常,但在Ext4.2.1只显示了10个月份少了俩月,在其他的Ext4版本还未测过,你可以试一下,有问题小纸条我[天王盖地虎],咱们一起解决。 2. 该组件最初...
Ext2.0.2经典的一个JS组件带EXT中文手册.rar
Ext、Ext4中各个组件、属性、方法详解,一个不漏;Ext学习入门及参考最好的资料
UI组件(ext jquery ucren)
Ext 2.0 框架结构图 Ext.Component ,Ext.BoxComponent ,Ext.Button, Ext.Editor
Ext的FormPanel组件说明formPanel的详细使用说明
Linux EXT4文件系统分析.pdf