初学Ext UI组件总结及（一）-- >读Ext.Component源码学习笔记

为了可以缓解审美疲劳，写出自己的Ext UI组件，加油。

错误之处，请大家指出。

Ext.Component是所有UI组件的顶层类，它继承了Observable，以支持高级语义事件。

Ext的UI组件的生命周期，粗略可分为，初始化组件-->渲染组件-->销毁组件

Ext.Component有点“模板模式”的味道，它不能“布局”也不能“show”出来，它只是定义了所有UI组件的“生老病死”和实现了一些通用的逻辑，然而每个组件的初始化过程渲染过程都不尽相同，所以具体的实现推迟到不同的子类中实现。

源码片段一（构造函数中）

   

config构造参数的

   config = config || {};

    //传特殊参数的处理

    if(config.initialConfig){

        if(config.isAction){           // actions

            this.baseAction = config;

        }

        config = config.initialConfig;




//容错处理，如果传入的是dom或者是Ext.Element及字符串，那么就根据它生成一个     

//配置项

    }else if(config.tagName || config.dom || Ext.isString(config)){ 

        config = {applyTo: config, id: config.id || config};

    }

    

    this.initialConfig = config;

    //拷贝配置项到"this"

Ext.apply(this, config);



//添加一些语义事件,可以想一下，此层应该对应实现什么事件

 this.addEvents{...}

 //下面二行，对此UI实例进行注册，以便可以借助Ext.ComponentMgr快捷的超找出      //此UI组件

 this.getId();

 Ext.ComponentMgr.register(this);

 //调用父类的构造参数

Ext.Component.superclass.constructor.call(this);

//初始化组件，这个是模板方法，留空，交给子类重写

this.initComponent();

 //这个是插件机制，比较有意思，理解还很浅，有一个“接口”,插件需要实现init()方          法

 if(this.plugins){

        if(Ext.isArray(this.plugins)){

            for(var i = 0, len = this.plugins.length; i < len; i++){

                this.plugins[i] = this.initPlugin(this.plugins[i]);

            }

        }else{

            this.plugins = this.initPlugin(this.plugins);

        }

    }

    //状态管理

    if(this.stateful !== false){

        this.initState();

    }



//渲染，applyTo和renderTo的区别在于插入DOM的位置，但最终依旧是依靠render函数渲染

 if(this.applyTo){

        this.applyToMarkup(this.applyTo);

        delete this.applyTo;

 }else if(this.renderTo){

        this.render(this.renderTo);

        delete this.renderTo;

 }



Ext.extend(Ext.Component, Ext.util.Observable, {..});

//...中，添加的重要实例方法如下

//源码注释：this is double processing, however it allows people to be able to do 

initComponent : function(){

       //在UI继承树顶层的Ext.Component只是绑定了监听器

        if(this.listeners){

            this.on(this.listeners);

            delete this.listeners;

        }

        this.enableBubble(this.bubbleEvents);

    },

//渲染过程，精华所在

render : function(container, position){

     //触发了beforerender事件，不为false才继续渲染，可以写此监听让其返回false阻止其渲染   

     if(!this.rendered && this.fireEvent('beforerender', this) !== false){

          //找到容纳元素的容器  

          if(!container && this.el){

                this.el = Ext.get(this.el);

                container = this.el.dom.parentNode;

                this.allowDomMove = false;

            }

           //很巧妙的一步，把包裹整个UI的最外层，包装成Ext.Element元素，比便可以使用Element的动画，拖拽，及其他工具函数 

           this.container = Ext.get(container);

           //添加容器的层叠样式 

           if(this.ctCls){

                this.container.addClass(this.ctCls);

            }

            

           this.rendered = true;

            if(position !== undefined){

                if(Ext.isNumber(position)){

                    position = this.container.dom.childNodes[position];

                }else{

                    position = Ext.getDom(position);

                }

            }

            

            //子类中需要根据如何渲染重写此方法

            this.onRender(this.container, position || null);

            if(this.autoShow){

                this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);

            }

            if(this.cls){

                this.el.addClass(this.cls);

                delete this.cls;

            }

            if(this.style){

                this.el.applyStyles(this.style);

                delete this.style;

            }

            if(this.overCls){

                this.el.addClassOnOver(this.overCls);

            }

            //触发render事件

            this.fireEvent('render', this);

            

            var contentTarget = this.getContentTarget();

            //根据配置项html，或者tpl'（模板）插入dom内容

            if (this.html){

                contentTarget.update(Ext.DomHelper.markup(this.html));

                delete this.html;

            }

            if (this.contentEl){

                var ce = Ext.getDom(this.contentEl);

                Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);

                contentTarget.appendChild(ce);

            }

            if (this.tpl) {

                if (!this.tpl.compile) {

                    this.tpl = new Ext.XTemplate(this.tpl);

                }

                if (this.data) {

                    this.tpl[this.tplWriteMode](contentTarget, this.data);

                    delete this.data;

                }

            }

            //渲染完毕

            //调用afterReader函数

            this.afterRender(this.container);

            if(this.hidden){

                // call this so we don't fire initial hide events.

                this.doHide();

            }

            if(this.disabled){

                // pass silent so the event doesn't fire the first time.

                this.disable(true);

            }

            if(this.stateful !== false){

                this.initStateEvents();

            }

            this.fireEvent('afterrender', this);

        }

        return this;

    },



//真正干渲染工作的方法，需要根据子类重写

 onRender : function(ct, position){

        if(!this.el && this.autoEl){

            if(Ext.isString(this.autoEl)){

                this.el = document.createElement(this.autoEl);

            }else{

                var div = document.createElement('div');

                Ext.DomHelper.overwrite(div, this.autoEl);

                this.el = div.firstChild;

            }

            if (!this.el.id) {

                this.el.id = this.getId();

            }

        }

        if(this.el){

            this.el = Ext.get(this.el);

            if(this.allowDomMove !== false){

                ct.dom.insertBefore(this.el.dom, position);

                if (div) {

                    Ext.removeNode(div);

                    div = null;

                }

            }

        }

    },


  
//组件的销毁

  //删除组件对应的Dom节点

  destroy : function(){

        if(!this.isDestroyed){

            if(this.fireEvent('beforedestroy', this) !== false){

                this.destroying = true;

                //触发销毁之前函数，可以“趁机”做一些工作

                this.beforeDestroy();

                //如果有对应容器，移除

                if(this.ownerCt && this.ownerCt.remove){

                    this.ownerCt.remove(this, false);

                }

                if(this.rendered){

                    this.el.remove();

                    if(this.actionMode == 'container' || this.removeMode == 'container'){

                        this.container.remove();

                    }

                }

                // Stop any buffered tasks

                if(this.focusTask && this.focusTask.cancel){

                    this.focusTask.cancel();

                }

                this.onDestroy();

                //注销组件

                Ext.ComponentMgr.unregister(this);

                this.fireEvent('destroy', this);

                //消除监听

                this.purgeListeners();

                this.destroying = false;

                this.isDestroyed = true;

            }

        }

    },