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

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

相信大家看了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){
    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 . },
   10 .
   11 .  //  private
   12 . createComponent :  function (config){
   13 .  return  Ext.ComponentMgr.create(config,  this .defaultType);
   14 . },

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

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