Ext组件渲染render的全
来源:互联网 发布:php环境变量配置 编辑:程序博客网 时间:2024/05/17 18:01
模板模式是设计模式中很重要的一个知识点,在面向对象设计中有着举足轻重的地位。
在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方法”,一层层递归下去了,呵呵
仔细的朋友去看container的时候会发现没有onRender方法,
- Ext组件渲染render的全
- Ext组件渲染render的全过程详述
- Ext组件渲染render的全过程
- Ext组件渲染render的全过程
- Ext组件渲染render的全过程详述
- Ext组件渲染render的全过程
- Ext源码分析之模板模式解说——Ext组件渲染render的全过程详述
- Ext源码分析之模板模式解说——Ext组件渲染render的全过程详述
- Ext源码分析之模板模式解说——Ext组件渲染render的全过程详述
- EXT render 渲染过程
- EXT render 渲染过程
- 刷新组件RENDER(重新渲染)的三种方式详解
- RENDER渲染机制的局限:无法渲染动态添加的子组件
- vuejs的render渲染函数
- 【REACT NATIVE 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解
- 【React Native】刷新组件RENDER(重新渲染)的三种方式详解
- chromium for android硬件渲染流程全解析(render进程)
- Django的render(模板渲染)机制
- SLIC Superpixels Compared to State-of-the-Art Superpixel Methods
- Hadoop技术内幕之MapReduce作业的生命周期
- VBA 使用ADO组件的两种方式--引用法创建法
- 烫烫烫烫
- python程序调试错误(一)
- Ext组件渲染render的全
- AngularJS 使用 localStorage 存储数据。
- 如何用js检查浏览器是否安装flash插件
- ubuntu16.04 下 C# 开发环境搭建
- Windows API数据类型表
- 技术变革 企业互联——用友&MSUP技术开放日
- Innodb事务种类及实现
- CCS v6.1下完成TI-RTOS配置
- myeclipse项目右键,没有configure菜单