Ext架构分析(3)--Widget之父Component:总结-阿里云开发者社区

开发者社区> 开发与运维> 正文

Ext架构分析(3)--Widget之父Component:总结

简介: 在这里,我们引用Ext Overview中的Component life cycle对组件的功能进行相应的总结: [list=1] 配置项对象生效: 组件对象的构造器会把全部的配置项传入到其子类中去,并且进行下列所有的步骤。

在这里,我们引用Ext Overview中的Component life cycle对组件的功能进行相应的总结:
[list=1]

配置项对象生效:
组件对象的构造器会把全部的配置项传入到其子类中去,并且进行下列所有的步骤。 组件的底层事件创建
这些事件由组件对象负责触发。事件有enable, disable, beforeshow, show, beforehide, hide, beforerender, render, beforedestroy, destroy 组件在组件管理器里登记
initComponent这方法总是使用在子类中,就其本身而论,该方法是一个模板方法(template method),用于每个子类去现实任何所需的构造器逻辑(any needed constructor logic)。首先会创建类,然后组件对象各层次里面的每个类都应该调用superclass.initComponent。通过该方法,就可方便地实现(implement),或重写(Override)任意一层构造器的逻辑。 加载插件(如果有的话)
如果该组件有指定任何插件,这时便会初始化。 渲染组件(如果必须的话)
如果指定了组件的renderToapplyTo配置属性,那么渲染工作就会立即开始,否则意味着延时渲染(在layout对象的layout方法中也会对组件进行渲染),即等待到显式控制显示,或是其容器告知其显示的命令。 渲染过程 Rendering
[list=1] 触发beforerender事件
这是个可取消的事件,指定的句柄(handler)通过返回false可阻止组件进行渲染 设置好容器
如果没有指定一个容器,那么将使用位于DOM元素中组件的父节点作为容器。 调用onRender方法 这是子类渲染最重要的一个步骤,由于该方法是一个模板方法(template method),用于每个子类去现实任何所需的渲染逻辑(any needed render logic)。首先会创建类,然后组件对象各层次里面的每个类都应调用superclass.onRender。通过该方法,就可方便地实现(implement),或重写(Override)任意一层渲染的逻辑。 处理组件是“隐藏”状态 默认下,许多组件是由CSS样式类如"x-hidden"设置隐藏的。如果 autoShow所配置的值为true,这时就不会有这个"hide"样式类作用在该组件上 自定义的类、样式生效 Custom class and/or style applied
一切组件的子类都支持clsstyle 两种特殊的配置属性,分别用于指定用户自定义的CSS样式类和CSS规则。 推荐指定cls的方法来制定组件及其各部分的可视化设置。由于该样式类会套用在组件markup最外的一层元素,所以标准CSS规则会继承到组件下任何子元素的身上。 触发render事件 The render event is fired
这是组件通知成功渲染的一个步骤。这时,你可肯定地认为组件的DOM元素是可用的了。如果尝试在渲染之前访问组件,会抛出一个不可用的异常。 调用了afterRender方法 The afterRender method is called
这是另外一个实现或重写特定所需的“后渲染”逻辑的模板方法。每个子类应调用superclass.afterRender. 组件被隐藏或禁用(如果有的话) The Component is hidden and/or disabled (if applicable)
配置项hidden和disabled到这步生效 所有状态感知的事件初始化(如果有的话) Any state-specific events are initialized (if applicable)
状态感知的组件可由事件声明特殊加载和保存状态。如支持,加入此类的事件。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章