extjs组件生命周期大体分为3个阶段:初始化、渲染、销毁。

  第一阶段:初始化

  初始化工作开始于组件的诞生,所有必须的配置设定、事件注册、预渲染处理等都在此时进行。

  1、应用组件的配置:

    当初始化一个组件的实例时,传递的组件配置对象包含了希望让组件拥有的所有功能,这些都是在Ext.Component基类的前几行代码完成的。

  2、注册事件:

    诸如enable/disable,show,hide,render,destory,state restore,state save等等事件,是所有继承于Ext.Component的组件都会默认拥有的基本事件,它们将会在执行某些行为之前或之后被触发。

  3、ComponentMgr注册组件实例:

    在这里,每一个组件的实例都会生成一个字符串作为其ID值,供Ext.Cmp()方法来获得该实例的引用。在实例的配置中,可以通过配置id值给其传递ID值,不过如果设置了同样的ID值,Ext.Cmp()方法找到的实例引用将会是最后一个设置了该ID的组件。也就是说,最后设置的ID值将会覆盖前面的所有相同ID值。

  4、调用initComponent()方法:

    关于initComponent()方法,在直接或间接继承了Ext.Component基类的组件中,该方法会在Component的构造函数constructor中被调用。

    这里来看看其回调顺序:

    Ext.Window ==> Ext.Panel ==> Ext.Container ==> Ext.BoxComponent ==> Ext.Component

    在自定义组件时,一般都会覆盖父类的initComponent()方法,并且在最后用this.callParent()来回调父类函数,则在实例化组件的过程中,container的initComponent方法里的this已经变成了该实例对象本身。如果不这么做,譬如直接将itsms写入配置中,则在内部调用container的initComponent方法时,this所指的对象将不是目标实例化的对象。配置内的items的内容将残留在new的对象上,从而导致在连续实例化同一个自定义组件时,除了第一个实例,后面的实例都将失败的结果。

    于是在自定义组件的时候,最好将配置项写入initComponent方法中,并在配置项最后使用this.callParent()来回调其父类函数。有许多工作都会在initComponent方法里完成。例如注册自定义的事件、设定data stores、创建子控件等。initComponent可以看做constructor的补充,因此经常用于扩展组件的入口点。

  5、加载插件和组件渲染:    

    如果在constructor的参数中传递了plugin对象,plugin的init方法将会被调用,同时会将父对象作为参数传递进init方法里。如果组件中配置了renderTo或者applyTo,则组件将马上被渲染,否则,它会被延迟渲染,直到组件被显式调用显示,或被它的容器所调用。


 第二阶段:组件呈现

  1、触发beforerender事件:

    这是在组件被render渲染前被调用的。用以提供处理函数或者阻止组件的继续渲染。

  2、设置容器:

    如果没有父容器被指定,默认它的父对象被指定为它的容器。

  3、调用onReader方法:    

    这是为子类执行呈现工作的一个非常重要的方法,这是一个模板方法,在子类中可以根据需来重写它的实现逻辑。直接被创建的类的  onRender  首先被调用,然后它可以通过superclass.onRender 来调用基类的 onRender 方法。这个方法很容易被重新实现,如果需要你可以在继承关系的任意类中重写这个方法。  

  4、不隐藏组件     

    默认,大多数组件都会通过设置像 x-hidden 这个样式来使它隐藏。当 autoShow 设置为true 时,这个隐藏功能的样式会被移除。

  5、应用自定义样式

    所有的 Component 子类都支持指定 cls 配置属性,通过它可以为 Component 所呈现的HTML 元素指定 CSS 样式。通过添加组件的 cls 属性,使用标准的样式规则,是一个自定义可视组件显示效果的非常完美的方法。

  6、render 方法被触发

    简单的通知组件已经被成功的呈现了。

  7、调用 afterRender

    这是另一个模板方法,子类根据逻辑需要可以重新实现或覆盖该方法。所有的子类可以通过调 superclass.afterRender.来调用父类的方法。

  8、组件隐藏或不可用

    根据配置选项的值来设置。

  9、状态事件被初始化

    可以状态化的组件会定义一些事件来指定状态的初始化和保存。如果提供,这些事件会被添加。


  第三阶段:销毁  

  1、触发 beforedestroy      

    这是一个可取消的事件,如果需要,可能通过提供事件代理来阻止组件被销毁。   

  2、调用 beforeDestroy 方法     

    又一个模板方法,在子类中可以重新实现和调用父类的方法。   

  3、移除事件监听者(代理)    

    如果组件已被呈现,则移除它底层的 HTML 元素的事件监听列表,然后将元素从 DOM中移除。

  4、onDestroy 被调用

    这个还是一个模板方法,在子类可以重新实现。这里需要注意的是,容器类提供了一个默认的 onDestroy 实现,它会循环销毁它的成员组。

  5、组件实例从 ComponentMgr 中反注册

    不可以再通过 Ext.getCmp 获取到对象实例。

  6、destroy 事件被触发

    这只是一个简单的提醒,表示组件销毁成功。

  7、移除 Component 上的事件代理

    组件可以独立于元素,自己拥有事件代理,如果存在则移除它们。


ExtJS关于组件Component生命周期的更多相关文章

  1. 【ExtJS】关于Component生命周期

    很久以前就学习过extjs的组件生命周期,很久之后,再回头看一看,又增加好多新的认识. extjs组件生命周期大体分为3个阶段:初始化.渲染.销毁. 第一阶段:初始化 初始化工作开始于组件的诞生,所有 ...

  2. 202-React.Component组件、生命周期

    一.概述 React可以将组件定义为类或函数.定义为类的组件当前提供了更多的功能.要定义React组件类,您需要扩展React.Component: class Welcome extends Rea ...

  3. Flex组件的生命周期

    组件实例化生命周期描述了用组件类创建组件对象时所发生的一系列步骤,作为生命周期的一部分,flex自动调用组件的的方法,发出事件,并使组件可见. 下面例子用as创建一个btn控件,并将其加入容器中 va ...

  4. React 深入系列4:组件的生命周期

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列4:组件的生命周期 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助 ...

  5. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  6. 理解React组件的生命周期

    本文作者写作的时间较早,所以里面会出现很多的旧版ES5的时代的方法.不过,虽然如此并不影响读者理解组件的生命周期.反而是作者分为几种不同的触发机制来解释生命周期的各个方法,让读者更加容易理解涉及到的概 ...

  7. 2. React组件的生命周期

    2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中Re ...

  8. React Native组件(一)组件的生命周期

    相关文章 React Native探索系列 前言 React Native有很多组件比如Image.ListView等等,想要合理的使用组件,首先要先了解组件的生命周期. 1.概述 无论你是开发And ...

  9. 【RN - 基础】之React Native组件的生命周期

    下图描述了React Native中组件的生命周期: 从上图中可以看到,React Native组件的生命周期可以分为初始化阶段.存在阶段和销毁阶段. 实例化阶段 实例化阶段是React Native ...

随机推荐

  1. Python----reduce原来是这样用的

    官方解释: Apply function of two arguments cumulatively to the items of iterable, from left to right, so ...

  2. JS实战 · 实践积累点滴杂烩

    onmouseover : 鼠标进入 onmouseout : 鼠标离开 onfocus:得到焦点   表单提交执行JS代码,有两种常用方式. 一:在局部(比如按钮定义处)用onclick=" ...

  3. sql 笔记(mysql)

    Windows 安装mysql(zip包) 1,zip包解压到要安装目录 2,配置环境变量,Path后加mysql路径\bin 3,修改配置文件,mysql目录下my-default.ini base ...

  4. Android开发学习之路-提升用户体验小技巧

    记得之前看谷歌的一个视频提到这个用户体验的问题,今天想起来了就写了个Demo来记录下. 当一个事件发生之后,用户需要一段时间才能知道结果,那么这段时间究竟应该让用户干什么?这个问题很常见,比如我们的软 ...

  5. JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  6. Android知识——ViewHolder的作用与用法

    ViewHolder通常出现在适配器里,为的是listview滚动的时候快速设置值,而不必每次都重新创建很多对象,从而提升性能.在android开发中Listview是一个很重要的组件,它以列表的形式 ...

  7. Uiautomator 2.0之UiWatcher类学习小记

    1. 主要功能 使用此方法可以处理中断问题,从而保证测试用例的正常运行. 2. 相关API API 说明 registerWatcher (String name, UiWatcher watcher ...

  8. MongoDB 搭建副本集

    副本集(Replica Set)是一组MongoDB实例组成的集群,由一个主(Primary)服务器和多个备份(Secondary)服务器构成.通过Replication,将数据的更新由Primary ...

  9. 《JS设计模式笔记》 1,单例模式

    <script type="text/javascript"> //单例模式 //1,每次点击都会生成一个新的div var createMask=function ( ...

  10. 深入理解DOM事件类型系列第一篇——鼠标事件

    × 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...