Extjs组件的生命周期

　　今天闲着没事，打算要学会自定义组件！..

　　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方法被调用。

Extjs组件的生命周期相关推荐

Android四大基本组件和生命周期的介绍
Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 一:了解四大基本组件 Activity ...
react学习笔记(4)组件的生命周期(运行阶段和销毁阶段)以及事件处理函数
1.组件的生命周期接着(2)中的组件生命周期 1.运行阶段运行阶段有5个步骤: componentWillReceiveProps: 父组件修改属性触发,可以修改新属性,修改状态. shouldC ...
Mini 容器学习笔记4——组件的生命周期(应用篇)
Mini容器支持6中生命周期类型: 1. Singleton :单利类型(缺省组件都是单利类型的生命周期,由容器进行托管的) [Test]public void SingletonLifestyleT ...
Android之React Native 中组件的生命周期
React Native 中组件的生命周期概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
native react 更新机制_React Native - 组件的生命周期详解（附：各阶段调用的方法）...
一个 React Native 组件从它被 React Native框架加载,到最终被 React Native 框架卸载,会经历一个完整的生命周期. 在这个生命周期中,我们可以定义一些生命周期函数, ...
如何销毁一个实例化对象_基于脚本的游戏对象系统（1）实例化、组件及生命周期...
前置说明:这是2016年在开发 CreateX Engine 2 时写的文章,这个专栏也开了两年,一直空着,最近有时间慢慢填写内容,两年多过去了,对于引擎的理念也有了一些变化,可能会不一致,甚至是颠覆 ...
React 深入系列４：组件的生命周期
文:徐超,<React进阶之路>作者授权发布,转载请注明作者及出处 React 深入系列4:组件的生命周期 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助 ...
【unity3d study ---- 麦子学院】---------- unity3d常用组件及分析 ---------- 组件的生命周期...
组件的生命周期 1 using UnityEngine; 2 using System.Collections; 3 4 public class ComponentLift : MonoBehavi ...

Extjs组件的生命周期

Extjs组件的生命周期相关推荐

最新文章

热门文章