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

在这里,我们引用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)
      状态感知的组件可由事件声明特殊加载和保存状态。如支持,加入此类的事件。
    • 原文地址:https://www.cnblogs.com/meetrice/p/1206113.html