Extjs组件的生命周期

原创 2016年08月30日 09:39:10

Extjs的控件和现实世界中的事物有很多相似的地方,都拥有被创建、使用以及销毁这样一个生命周期。

Extjs控件的生命周期大体分为三个阶段:初始化、渲染、销毁。如下图所示:

 

Extjs控件的生命周期总是以[初始化]开始,以[销毁]结束,组件不一定会有[渲染]这一过程。为了更好的了解并运用好生命周期的整个结构,我们必须更详细的去了解这个过程。

如果你打算扩展、组合Extjs控件或者创建自己的插件,掌握组件的生命将非常重要。组件生命周期的整个过程都在基类Ext.Component中有了很好的体现。

第一个阶段:初始化

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

让我们一起浏览一下初始化的每一个步骤:

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

2.注册组件基本的事件:每一个继承于Ext.Component的组件都会默认响应一些基本的事件,它们会在执行某些行为之前或之后被触发:enable/disable,show,hide,render,destory,state restore,state save等等。

在执行某些行为之前触发的事件主要用于检查成功返回某些条件之后执行某个逻辑,例如,myPanel.show被调用,它将触发beforeshow事件,和beforeshow事件绑定的方法将会被执行。如果beforeshow事件初始函数返回了false,myPanel将不会show。

3.ComponentMgr 注册:ComponentMgr类会为每一个被实例化的组件产生一个唯一的字符串作为它的ID。你可以在配置信息里,通过传递ID参数到constructor构造器里来复写Ext-generated ID。需要注意的是如果注册的ID有重复值,那么新产生的组件将会覆盖后产的。所以当你打算自己传递ID时一定要保证ID的唯一性。

4.执行initComponent:有许多工作都会在initComponent方法里完成。例如注册自定义的事件、设定data stores、创建子控件等。initComponent可以看做constructor的补充,因此经常用于扩展组件的入口点。

5.初始化plugins:如果在constructor的参数中传递了plugin对象,plugin的init方法将会被调用,同时会将父对象作为参数传递进init方法里。

6.初始化Component状态:如果组件是state-aware的,它将利用全局单例StateManager类注册自己的状态。默认情况下,所有的Component都是State aware的。

代码片段:Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

7.渲染Component:如果在constructor中renderTo或applyTo参数被传递,此时将开始执行渲染,反之组件延迟渲染,直到它的render方法被调用。

版权声明:本文为博主原创文章,未经博主允许不得转载。

ReactJS组件生命周期详述

前面已经写了一篇关于reactJS组件生命周期的博文,此篇博文是一个补充,增加了一些例子,有助于更好的理解reactJS组件。 初始化阶段能够使用的钩子函数(按照触发顺序): getDefault...
  • liuyan19891230
  • liuyan19891230
  • 2016年04月06日 10:25
  • 4314

深入剖析Android四大组件(一)——Activity生命周期详解

虽然如此,但即使你没有实现onSaveInstanceState()方法,也还是有一些Activity的状态通过Activity类默认实现的onSaveInstanceState()方法恢复。特别是,...
  • liyuanjinglyj
  • liyuanjinglyj
  • 2015年07月25日 19:37
  • 2987

Android四大基本组件介绍与生命周期

Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器。 一:了解四大基本组件 Activity...
  • haitaoDoit
  • haitaoDoit
  • 2015年03月31日 11:20
  • 5734

Extjs组件的生命周期

转自:http://blog.csdn.net/foreverxyi/article/details/6869296,在此感谢!     Extjs的控件和现实世界中的事物有很多相似的地方...
  • LZG0321
  • LZG0321
  • 2012年04月16日 18:48
  • 905

Extjs组件的生命周期

转自:http://blog.csdn.net/foreverxyi/article/details/6869296,在此感谢!     Extjs的控件和现实世界中的事物有很多相似的地方...
  • shopharZFJ
  • shopharZFJ
  • 2015年01月10日 11:47
  • 276

extjs 组件生命周期(转)

http://blog.sina.com.cn/s/blog_538ada140100yotz.html 组件有三种类型:基本组件,工具栏组件,表单组件。 下面的每一个阶段都是从 Co...
  • qiufeng1989916
  • qiufeng1989916
  • 2014年02月20日 13:48
  • 410

Extjs组件的生命周期

 Extjs的控件和现实世界中的事物有很多相似的地方,都拥有被创建、使用以及销毁这样一个生命周期。Extjs控件的生命周期大体分为三个阶段:初始化、渲染、销毁。如下图所示: Extjs控件的生命周期总...
  • sxychenjing
  • sxychenjing
  • 2011年06月13日 13:40
  • 2286

React组件的生命周期

  • 2017年07月20日 16:06
  • 2KB
  • 下载

android 组件Activity生命周期

  • 2014年04月03日 18:01
  • 87KB
  • 下载

Android四大基本组件介绍与生命周期

  • 2015年09月07日 14:03
  • 175KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Extjs组件的生命周期
举报原因:
原因补充:

(最多只允许输入30个字)