`

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

 

转自:http://blog.csdn.net/foreverxyi/article/details/6869296

分享到:
评论

相关推荐

    ExtJS 组件扩展

    1. **深入学习ExtJS组件生命周期**:理解每个阶段的关键作用及如何正确覆盖相关方法。 2. **充分利用xtype机制**:避免直接使用`new`操作符创建组件,利用xtype实现组件的懒加载和延迟渲染。 3. **遵循最佳设计模式*...

    EXTjs组件.pdf

    EXTjs组件是构建EXTJS应用程序的核心元素,它们是基于Ext.Component的子类,具备自动化的生命周期管理,包括创建、渲染、尺寸调整、定位和销毁等关键功能。组件是EXTJS中可交互的部件,可以是按钮、表格、面板等,...

    ExtJS开发插件及Ext包

    - 插件的核心方法是`init`,在这个方法中,你可以向关联的组件添加事件监听器、修改配置或者在组件生命周期的特定阶段执行操作。 - 为了使用插件,需要将其包含在应用的脚本加载序列中,并通过`plugins`配置项将其...

    EXTJS讲解个人项目经历

    EXTJS组件有自己的生命周期,包括创建、渲染、显示、隐藏、销毁等阶段,开发者可以监听和处理这些生命周期事件。 9. **布局管理**: EXTJS提供了多种布局模式,如Fit、Border、Form、Table等,用于控制组件在容器...

    ExtJS编写的youtube视频播放组件 示例

    1. ExtJS组件系统,包括组件的生命周期、配置和事件处理。 2. YouTube JavaScript API的使用,包括创建播放器实例和处理播放事件。 3. 自定义组件和插件的开发,提升代码的复用性和可维护性。 4. 布局管理器的运用,...

    轻松搞定Extjs 带目录

    - 组件生命周期:创建、渲染、销毁等。 - 组件渲染方法:`render`方法用于将组件渲染到页面上。 #### 9. 常用组件 Extjs提供丰富的组件库,包括: - 按钮、日期选择器、ComboBox等,每种组件都有其特定的使用场景...

    extjs基础教程

    - **组件的生命周期 (Component Life Cycle)**:每个EXTJS组件都有自己的生命周期,包括创建、初始化、渲染、显示和销毁等阶段。理解组件的生命周期对于优化性能和解决问题至关重要。 - **X 类型 (XTypes)**:...

    ExtJs开始之旅

    你会了解到ExtJS是如何通过组件化的思想来构建页面,每个组件都有自己的生命周期、属性、方法和事件,这使得代码复用和维护变得简单。 接下来,"环境搭建"章节将指导你配置开发环境。这通常包括下载和安装ExtJS库,...

    ExtJS中文手册.doc

    1. **基础概念**:介绍ExtJS的基本结构,如类系统、MVC模式、组件生命周期等。 2. **组件库**:详述各种组件的使用方法,如Grid面板、Form表单、Tree视图、Charts图表等。 3. **布局管理**:讲解如何配置和使用不同...

    ExtJs API 3.1.1 3.3.1 2.X

    在这个版本中,开发者可以学习如何利用中文文档理解ExtJs的组件模型,包括组件的生命周期、配置选项、方法和事件。同时,2.X版本可能包含了一些早期的特性,例如早期的数据封装和远程数据交互的实现。 总的来说,...

    EXTJS批量上传下载

    1. **EXTJS组件模型**:EXTJS基于组件化的思想,每个控件都是可复用的,批量上传下载组件是EXTJS控件体系的一个实例,具备完整的生命周期和事件系统。 2. **文件选择**:EXTJS支持多文件选择,用户可以通过文件...

    ExtJS内存调试工具 sIEve

    3. **ExtJS组件分析**:由于ExtJS是基于组件的框架,sIEve特别关注组件的生命周期,能够检测到未正确销毁的组件,这些组件往往是内存泄漏的主要来源。 4. **事件监听器检查**:事件监听器如果没有被正确移除,也...

    ExtJS6学习文档_PDF格式带书签

    这一章深入讲解了ExtJS的核心概念,如 xtype、配置项、事件处理、组件生命周期等。理解这些概念是掌握ExtJS的关键,它们帮助开发者更好地定制和管理UI组件。 第3章:基础组件 本章涵盖了ExtJS中的基础组件,如按钮...

    轻松搞定Extjs

    - **Ext.onReady事件**: 介绍了一个重要的生命周期事件,该事件确保所有DOM元素加载完成后执行特定的回调函数。 - **来自Extjs的问候**: 通过示例演示了如何在页面加载完毕后显示欢迎信息。 - **让界面动起来**: ...

    ExtJS_3.3中文

    每个组件都有自己的生命周期和配置选项,可以进行灵活组合和定制。 2. **布局管理器**:ExtJS提供了多种布局方式,如fit布局、border布局、form布局等,以适应不同场景下的界面布局需求。 3. **数据绑定**:ExtJS...

    extjs4学习文档

    `Ext.application`则是EXTJS应用的主要入口点,用于管理整个应用程序的生命周期。 EXTJS还提供了一种便捷的方式获取页面元素,即`Ext.get`方法。通过元素的ID,如`Ext.get('myDiv')`,可以获取到对应的DOM元素。...

    Extjs4.1 小例子(适合extjs初学者学习使用)

    1. **组件系统**:ExtJS 4.1基于组件化设计,理解组件的生命周期、配置、事件处理和嵌套关系是基础。 2. **布局管理**:如Box、Table、Fit、Form等布局方式,以及如何调整组件大小和位置。 3. **数据绑定**:观察...

    跟我一起学extjs5前20节的代码

    5. **开发经验**:学习EXTJS5的过程中,需要注意遵循EXTJS5的MVC(模型-视图-控制器)设计模式,理解组件生命周期,以及如何有效地组织和管理代码。同时,Sencha CMD工具的使用也非常重要,它能自动化构建、压缩和...

Global site tag (gtag.js) - Google Analytics