EXT render 渲染过程

模板模式是设计模式中很重要的一个知识点,我在模式总结——模板方法这篇文章中已有总结,在面向对象设计中有着举足轻重的地位。 

在Ext中更是发挥的淋漓尽致,为什么这么说呢?Ext中的组件有着很深的继承关系,很多方法都有着重复,而且不仅 
是代码上的重复,更多的是流程上的重复 

比方说,Ext.Panel吧,将一个Panel显示在浏览器中,其过程叫做render(渲染)。有这么几道工序: 
第一、触发”beforeRender”事件 
第二、得到这个Panel的父节点(针对DOM来说),即容器,也就是供Panel入住的那个容器 
第三、设置rendered=true 
第四、调用onRender方法,这步是最重要的,也就是如何将组件显示在浏览器上,涉及到很多流程,一会详解 
第五、设置这个panel的css 
第六、触发”render”事件,指的是当render完成后,触发的事件 
第七、调用aferRender,这步和第四步一样,是很重要的流程之一 
第八、看看要不要将这个panel隐藏或者失效,如果用户设置了hidden或者disable 
第九、设置这个panel的位置,也就是doLayout,布局 

再来,Ext.Panel的子类,Ext.TabPanel,也有这么几道工序: 
第一、触发”beforeRender”事件 
第二、得到这个Panel的父节点(针对DOM来说),即容器,也就是供Panel入住的那个容器 
第三、设置rendered=true 
第四、调用onRender方法,这步是最重要的,也就是如何将组件显示在浏览器上,涉及到很多流程,一会详解 
第五、设置这个panel的css 
第六、触发”render”事件,指的是当render完成后,触发的事件 
第七、调用aferRender,这步和第四步一样,是很重要的流程之一 
第八、看看要不要将这个panel隐藏或者失效,如果用户设置了hidden或者disable 
第九、设置这个panel的位置,也就是doLayout,布局 
第十、设置activeTab,也就是激活哪个Tab面板 

仅仅多了第十个步骤。 

其他例子不举了,都是仅仅在最后几个步骤上不同而已,大家要说了,这个那是什么模板模式,不就是最简单的继承吗? 
错了,继承指的是属性和方法的继承,但现在是一个流程,一个系列的工序”继承”,这就是模板模式了。 

我们来看,应用了模板模式后的工序 

Ext.TabPanel只有2道工序了 
第一、完成Panel渲染的工序 
第二、设置activeTab,也就是激活哪个Tab面板 

Ext.Panel一道工序 
第一、完成Ext.Container的渲染工序 

Ext.Container有2道工序 
第一、完成BoxComponent的渲染工序 
第二、设置这个panel的位置,也就是doLayout,布局 

Ext.BoxComponent一道工序 
第一、完成Ext.Component的渲染工序 

Ext.Component八道工序 
第一、触发”beforeRender”事件 
第二、得到这个Panel的父节点(针对DOM来说),即容器,也就是供Panel入住的那个容器 
第三、设置rendered=true 
第四、调用onRender方法,这步是最重要的,也就是如何将组件显示在浏览器上,涉及到很多流程,一会详解 
第五、设置这个panel的css 
第六、触发”render”事件,指的是当render完成后,触发的事件 
第七、调用aferRender,这步和第四步一样,是很重要的流程之一 
第八、看看要不要将这个panel隐藏或者失效,如果用户设置了hidden或者disable 

下面把流程图展示出来(配合上onRender和afterRender) 

我们来看下图 

 


 


那么在Ext是如何让这些流程在不同类之间自由跳转的呢?这就是大名鼎鼎的call和apply在起着重要作用了 
比如我们来看如下代码 
Ext.Panel.superclass.onRender.call(this, ct, position); 
什么意思?this就是panel的意思,Ext.Panel.superclass就是Ext.Container,这句代码的意思就是“panel,你给我去执行container里面的onRender方法” 
那么在Ext.Container的onRender方法有存在着 
Ext.Container.superclass.onRender.call(this, ct, position); 
这样的代码,这里的this还是指panel,不懂看上图,这里所有的this统统指panel对象,记住!意思是“panel,你再给我执行container父类里面的onRender方法” 
接着又会出现“panel,你再给我执行container父类的父类里面的onRender方法”,一层层递归下去了,呵呵
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值