文档章节

ExtJS Component 的生命周期

learn_more
 learn_more
发布于 2015/05/02 01:02
字数 1177
阅读 72
收藏 3

本文转载........

组件有三种类型:基本组件,工具栏组件,表单组件。 下面的每一个阶段都是从 Component 继承下来的类的生命周期中重要的阶段。 

第一个阶段:初始化

 1、应用配置选项

 从 Component 继承下来的类并不需要提供(通常没有提供)一个独立的构造器。

Component 的构造器不仅应用从子类传过来的配置选项,同时它还做了以下的工作。

 2、创建事件

 任何组件都有 enabled、disable、beforeshow、show、beforehide、hide、bdforerender、render、

beforedesctory、destory 事件,这些事件可以被任何组件调用。

 3、在 ComponentMgr 中注册组件实例

 这样就可以通过 Ext.getCmp 被获得实例引用。

 4、调用 initComponent 方法

 这是一个最重要的初始化步骤,它是做为一个模板方法,子类可以按需要重写这个方法。

被创建的类的 initComponent 首先被调用,然后通过组件 提供的 superclass.initComponent 向

上调用。这个方法非常容易被实现,如果需要,你还可以任意覆盖构造器逻辑。

 5、状态初始化

 如果组件有状态,已保存的状态会被重新加载。

 6、加载插件

 如果组件有指定插件,则插件会在这时候被初始化。

 7、组件呈现

 如果有配置 renderTo 或 applyTo,组件会马上被呈现输出,否则,它会被延迟输出,直到组件被显式调用显示,或被它的容器所调用输出。

 

 第二阶段:呈现

 1、触发 beforerender 事件

 这是一个可取消的事件,如果需要给提供处理函数来阻止组件的继续呈现输出。

 2、设置容器

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

 3、调用 onRender 方法

 这是为子类执行呈现工作的一个非常重要的方法,这是一个模板方法,在子类中可以根据需来重写它的实现逻辑。直接被创建的类的 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 上的事件代理

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


本文转载自:

learn_more
粉丝 93
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
ExtJs自学教程(1):一切从API开始

该系列文章不侧重全方位的去介绍ExtJs的使用,只是侧重于解决ExtJs问题的思考方法。写的人不用长篇大论,学的人则能够自立更生。l 学习的人只要有一些CSS的javascript的基础知识并且对于英文...

77970290
2013/05/07
0
0
ExtJS中get、getDom、getCmp、getBody、getDoc的使用

Ext中包含了几个以get开头的方法,这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等,在使用中要注意区别使用。 1、get方法 get方法用来得到一个Ext元素,也就是类型为E...

Junn
2012/11/22
0
0
Ext JS 6.0.0 正式版本发布,跨浏览器的 RIA 框架

Ext JS 6.0.0 正式版本发布,此版本包括大量的新特性以及错误修复: 新特性: Accessibility (3) EXTJS-12098 Containers should track their children’s focus EXTJS-13606 Floating mixi...

chpinck
2015/07/06
8.6K
49
ExtJs4.1目录结构介绍和使用说明

一、在做ExtJs开发之前首先要到网站上下载ExtJs的开发包,我用的最新版本是4.1.1。此版本相对于之前的版本目录结构发生了一些变化,没有了adapter目录, 目录结构如下 文件/文件夹名的作用:...

Junn
2013/01/17
0
1
FineUI 将不再内置 ExtJS (严格遵守 ExtJS 的开源规则)

从下个版本起,FineUI 将不再内置 ExtJS ,不过我会提供说明如何使用 ExtJS(并单独提供精简版的 ExtJS 包供论坛用户下载),现有的程序升级到新版本将不受影响(只需要将精简版的 extjs 文件...

三生石上
2013/06/01
2.5K
2

没有更多内容

加载失败,请刷新页面

加载更多

优雅的关闭Spring Boot

优雅的关闭Spring Boot 1、实现 TomcatConnectorCustomizer 接口拿到Tomcat的连接获取 Tomcat连接池 2、实现 ApplicationListener<ContextClosedEvent> 监听服务器关闭事件,注册JVM钩子函数...

sowhat
今天
2
0
Python3-Web开发

简介 Web开发框架 什么是Web框架? Web应用程序框架或简单的Web框架表示一组库和模块,使Web应用程序开发人员能够编写应用程序,而不必担心协议,线程管理等低级细节。 virtualenv是一个虚拟...

wuxinshui
今天
3
0
使用技媒体实践编写发布博客

技媒体实践博客 CSDN OSChina 知乎 简书 思否 掘金 51CTO

晨猫
今天
2
0
Lucene

1、什么是全文检索 数据分类 我们生活中的数据总体分为两种:结构化数据和非结构化数据。 结构化数据:指具有固定格式或有限长度的数据,如数据库,元数据等。 非结构化数据:指不定长或无固...

榴莲黑芝麻糊
昨天
5
0
python到setuptools、pip工具的安装

python安装 基础开发库   apt-get install gcc  apt-get install openssl libssl-dev 安装数据库和开发库   apt-get install mysql-server libmysqld-dev python环境   下载地址...

问题终结者
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部