Ext的组件体系结构研究.doc

Ext的组件体系结构研究 　　摘要：介绍了Ext组件及其组件的配置选项、属性、方法及用户扩展组件的方法，以便我们更好的学习Ext，从而更好的发挥Ext在前端开发的强大功能。 　　关键词：Ext；Component；组件生命周期；组件扩展 　　中图分类号：TP311.1文献标识码：A 文章编号：1009-3044(2011)09-1999-03 　　Research Ext Component Architecture 　　WANG Xiao-yan, SONG Shao-yun 　　(Information Technology Engineering College, Yuxi Normal University, Yuxi 653100, China) 　　Abstract: Ext components and its components are introduced configuration options, properties, methods, and users to extend the components, so we can better learn Ext, Ext to better play the power in the front-end development. 　　Keywords: Ext; component; component of the life cycle; component expansion 　　Ext是一个创建丰富互联网应用程序的跨浏览器的JavaScript库，基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件。学习Ext主要就是学习各种组件的功能、特性及使用方法。 　　1 Ext框架简介 　　Ext 框架提供面向构件的开发模式，使用面向对象的方式让项目中的所有基类和公共函数都是封装成一个独立的组件。这种强大的JavaScript库提供了可重用的对象和部件，简化了Ajax开发和丰富了客户端界面效果，通过使用该框架可以使web层的开发使用到面向对象的特性，比如可复用性和可继承性等。该框架的核心思想是通过JavaScript来动态创建页面的标记元素，从而使得页面更灵活。其实Ext本身并没使用到新技术，而是在JavaScript基础上结合这些设计思想发展过来的，它与普通的JavaScript相比具有以下一些优点和特性: 　　1）Ext所有JavaScript库都是跨浏览器支持的，这种支持使开发人员在构建Web应用程序时不需要考虑目标浏览器。 　　2）完全面向对象且可扩展的。 　　3）复用性高，便于统一web程序的界面设计[1]。 　　Ext不仅美观实用，而且满足了开发者对稳定性、易用性、可维护性的要求填补了企业级前端应用的空白，脱颖而出一举成为Ajax框架中的佼佼者。 　　2 Ext组件介绍 　　Ext组件是以Component类为基础定义的，在Component类的基础上，使用面向对象的方法，设计一系列的组件及控件，每一个组件都有一个指定的xType属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。 　　Ext中的组件体系由如图1和图2所示[2]。 　　图1的组件体系图向我们展示了我们整个Ext组件的组成及继承体系，以便于我们掌握组件各种特性。组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。我们在开发的时候，只需要直接使用这些组件及控件，就可以创建出丰富多彩的应用程序界面。窗口、树、表格、选项板、工具栏、菜单等都是可以直接复用的组件及控件。 　　2.1 组件的基本应用步骤 　　1）通过一个xType来指定组件的类别唯一标识。 　　2）使用new操作符来创建组件对象。 　　3）在容器中通过使用xType来使用组件。 　　4）给组件配置选项(oPtions):配置选项是Ext组件非常重要的特性，在大多数Ext组件中，都支持在构造函数中传递一个对象作为参数，在这个对象中包含组件的详细参数描述，Ext根据这些参数来创建组件。 　　5）组件渲染(render)及显示(show):组件只有在渲染后才能在页面中显示，可以通过多种方法来渲染及显示一个组件。 　　2.2 组件的生命周期 　　Ext组件并不是一个个分散的结构，它的采用继承方式紧密关联的的倒树结构。它把组件的共性的东西抽象出来为父类，这个类实现了创建―渲染―销毁的生命周期。理解Ext组件生命周期对于应用好Ext组件以及扩展Ext组件都非常重要。如果要编写自定义的组件或控件，就需要对生命周期中的各个子流程和方法非常熟悉，这样有利于解决实际项目中所遇到的各种问题，才能在类中通过适当的方法对组件作出处理，这是研究组件生命周期的重