Ext 2 Overview

Ext 2 Overview (Chinese)

Introduction

欢迎来到Ext 2.0。在下列各章节中，你将会接触到Ext 2.0最新的改进，你也将会了解，有哪些新功能是为你所用的。虽然作为一份概述性的内容，本文不会讨论如何编写Ext 2.0应用程序个中细节，但是你可在下面提供的资源，找到你所需的内容：

• Ext 1.x to 2.0升级指南
• Ext 2.0 API参考
• Ext 2.0范例
• Ext 2.0更新日志
• Ext社区论坛

Summary: 简述从Ext 1.x到2.0的新变化

Author: Brian Moeskau(译者：Frank Cheung)

Published: November 15, 2007

Ext Version: 2.0

Languages:  English Chinese Japanese

Contents

 [hide]

• 1 Introduction
• 2 有关重大改变的几个要点
  • 2.1 补充说明
• 3 组件模型 Component Model
  • 3.1 组件概述
  • 3.2 组件的生存周期Component Life Cycle
    • 3.2.1 初始化Initialization
    • 3.2.2 渲染过程 Rendering
    • 3.2.3 销毁过程 Destruction
  • 3.3 组件的X类型 XTypes
  • 3.4 BoxComponent
• 4 容器模型Container Model
  • 4.1 容器 Container
  • 4.2 面板 Panel
  • 4.3 Window
  • 4.4 视见区Viewport
• 5 布局 Layouts
  • 5.1 引言
  • 5.2 布局管理器 Layout Managers
    • 5.2.1 ContainerLayout
    • 5.2.2 CardLayout
    • 5.2.3 AbsoluteLayout
    • 5.2.4 ColumnLayout
    • 5.2.5 AccordionLayout
    • 5.2.6 FitLayout
    • 5.2.7 AnchorLayout
    • 5.2.8 FormLayout
    • 5.2.9 BorderLayout
    • 5.2.10 TableLayout
• 6 Grid
  • 6.1 概述
  • 6.2 列锁定的注意事项（Column Locking）
• 7 XTemplate
• 8 DataView
• 9 其它新组件
  • 9.1 动作 Action
  • 9.2 CycleButton
  • 9.3 Hidden (field)
  • 9.4 进度条 ProgressBar
  • 9.5 TimeField

有关重大改变的几个要点

文章内容是对2.0新变化的综合简述。请留意Ext框架在从1.x跨越到2.0的过程中，经历了无数的细微改进、臭虫修正和其他的改动。 要逐一列出尚难为之，所以本文着重提及架构上有转换的地方，和一些全新加入的功能。本文下列的各部分将完整地解释这每一项的细节。

• 组件模型 Component Model
  在1.x中就有Component和BoxComponent两个类了，但却没有深入整合到框架中去。到2.0，这两个类得到极大的改进并是一切主要组件的基础。 尽管这些类对于开发者而言一般是尽量隐藏细节，不过理解好组件生存周期这方面的基础知识有利于进一步的Ext学习。参阅详细。
• 容器模型 Container Model
  有几个核心类可用于生成器件（widgets）和包含其它组件的布局。容器Container为对象的容纳和组件的布局提供一个基础性的构成方式，对于整个Ext框架可视化必不可少。 面板Panel 从容器类继承，为用户程序提供特定功能的UI基类，属于容器结构层次中最常用的类。 窗口Window是面板的一种特殊类型，使得web应用程序如桌面式（desktop-style）那样。视见区Viewport是专为全屏幕web程序应用而设计的实用容器 。参阅详细
• 布局Layouts
  1.x中的布局方式集中围绕在BorderLayout和其相关的几个类。2.0中，布局的整体架构建立在崭新的容器类、布局类上。 BorderLayout现加入到九种风格布局之中。布局类已经是全部重写设计并考虑最大的可扩展性。 布局的管理亦受益于2.0的框架，去掉一些开发者之前需要面对的复杂实现。参阅详细
• Grid
  Grid组件往往都被认为是Ext的核心组件之一，在2.0的版本中同时继续演进。新版的用户界面更友好，性能更佳，功能上新加了行摘要、行归组、和一些基于插件实现如expandable rows和row numbering 等等的更多功能。参阅详细
• 模板 XTemplate
  1.x的模版类处理一些简单的模版时令人满意，但对于复杂的输出任务就缺乏健壮的支持。 在2.0中，全新的XTemplate可支持子模版，数组处理，直接代码执行，逻辑判断和更多有用的功能。参阅详细
• 数据视图 DataView
  1.x的模版将数据绑定到模版以生成制定的UI视图。JsonView是快速绑定JSON数据辅助类。2.0的DataView把以上两种方式作统一的处理，不同之处是它继承自BoxComponent，可更好地支持各种布局方式，新的XTemplate类为模版处理提供强大的支持。参阅详细
• 其它新组件
  这些新组件包括动作（Action）、CycleButton、 Hidden (field)、 ProgressBar和TimeField。参阅详细

补充说明

• 主题
  2.0支持开箱即用的主题（Theme），使用更为简化。Ext 1.x支持四套主题，但2.0减少到两套（"Ext Blue" 和Gray）。 如打算自定义Ext的主题，那么Gray主题就是一份不错的蓝本，另外一些2.0 社区主题也可以提供一些思路或直接使用。 这不是API改动的一部分，但是有需要在这里提及一下。
• 突破性进展
  令人遗憾，2.0的一些改动无法做到向后兼容。因为无论相关的组件还是渲染模型已经是从底层上大幅修改，许多现有的组件必须舍弃旧1.x的方式重写编写，与1.x的差别较大。 我们提供的1.x到2.0升级指南希望能协助解决现有Ext 1.x程序的升级问题。

组件模型 Component Model

组件概述

2.0的一个目标就是希望能以简单的代码块构建程序，甚至比以往更简单。 组件Component类最初在1.x引入，却没有全面整合到框架中去。在2.0中，组件所赋予的能力有长足的改进和提升，使得其成为整个架构里最为基础的一个类。 组件对象为组件的创建、渲染、事件处理、状态管理和销毁提供了统一的模型，Ext下面的每一个组件具备了这些由组件对象扩展出来的特性。这是2.0组件对象的关键特性：

• 显式声明构建器链和重写 Explicit constructor chaining and overriding
  组件会将一个基础构造器连同配置传入到子类中。函数initComponent用于提供制定的构造器逻辑，只要在继承链上的某一个子类实现便可，所有的组件都遵从此方式。此时的子类就可在initComponent中对其设置相关的属性，实现具体的功能。
• 可调控的渲染 Managed rendering
  2.0中，每个组件都支持延时渲染（lazy rendering），又称按需渲染（on-demand rendering）。渲染的调控一般是为你自动设置完好的。即使如此，你亦可以通过的beforerender和render事件控制渲染发生、结束，达到最为灵活的自定义调控。
• 可调控的销毁 Managed destruction
  每一个组件具有destroy的函数，当组件不再需要时，Ext就负责组件的结束调控，如自动垃圾回收和摧毁组件元素。当然，销毁亦提供相应的事件，如beforedestroy和destroy可按照实际的情况作出逻辑处理。
• 状态管理自动化 Automatic state management
  组件内建设置和获取状态（State）的功能，只要让全局对象StateManager和一个状态 Provider都初始化好，那么多数的组件都具有自动状态管理的能力。
• 组件常规行为的统一接口 Consistent interface for basic component behavior 
  一般常规的行为如隐藏、显示和激活、禁用均是组件的基本特性。如需要，这些都可由子类去重写或制定。
• 由组件管理器负责的可用调配 Availability via ComponentMgr
  Ext的每一个组件在创建的时候就会由组件管理器登记注册，即你可随时获取任何组件，只需调用Ext.getCmp('id')。
• 支持插件 Plugin support
  现在任何的组件可以通过插件的形式来扩展了。 插件实质是带有init方法的一种类。该方法会有一个单独的参数（类型为Ext.Component）传入到其中。 插件可通过组件的plugins配置项指定。当组件创建时，如果有插件可用，组件就会调用每个插件上的init方法，将自身的引用作为参数传入。 每个插件运行之后可调用组件的方法或响应组件的事件以实现自身的功能。

组件的生存周期Component Life Cycle

一般来说，组件的对象架构满足了“能运行（Just Works）”这一基本要求。架构在设计上已是调控好了大多数组件是怎样处理的，而且对最终开发者是透明的。 不过，若对组件对象扩展，或是有些需要制定的地方，就要利用一定的时间去实现。 深入理解组件对象的生存周期会是非常好的帮助。下面的内容就是对基于组件的每个类，一个周期内各个重要阶段作出解释：

初始化Initialization

1. 配置项对象生效了 
   The config object is applied.
   组件对象的构造器会把全部的配置项传入到其子类中去，并且进行下列所有的步骤。
2. 组件的底层事件创建了
   The base Component events are created
   这些事件由组件对象负责触发。事件有enable, disable, beforeshow, show, beforehide, hide, beforerender, render, beforedestroy, destroy （参阅Component API文档完整的内容）。
3. 组件在组件管理器里登记了
   The component is registered in ComponentMgr
   initComponent这方法总是使用在子类中，就其本身而论，该方法是一个模板方法（template method），用于每个子类去现实任何所需的构造器逻辑（any needed constructor logic）。首先会创建类，然后组件对象各层次里面的每个类都应该调用superclass.initComponent。通过该方法，就可方便地实现（implement），或重写（Override）任意一层构造器的逻辑。
4. 状态感知进行初始化（如果有的话）
   State is initialized (if applicable)
   如果组件是状态感知的，其状态会进行刷新。
5. 加载好插件（如果有的话）
   Plugins are loaded (if applicable)
   如果该组件有指定任何插件，这时便会初始化。
6. 渲染好插件（如果必须的话）
   The component is rendered (if applicable)
   如果指定了组件的renderTo 或 applyTo配置属性，那么渲染工作就会立即开始，否则意味着延时渲染，即等待到显式控制显示，或是其容器告知其显示的命令。

渲染过程 Rendering

1. 触发beforerender事件 The beforerender event is fired
   这是个可取消的事件，指定的句柄（handler）可阻止组件进行渲染
2. 设置好容器 The container is set
   如果没有指定一个容器，那么将使用位于DOM元素中组件的父节点作为容器。
3. 调用onRender方法 The onRender method is called
   这是子类渲染最重要的一个步骤，由于该方法是一个模板方法（template method），用于每个子类去现实任何所需的渲染逻辑（any needed render logic）。首先会创建类，然后组件对象各层次里面的每个类都应调用superclass.onRender。通过该方法，就可方便地实现（implement），或重写（Override）任意一层渲染的逻辑。
4. 组件是“隐藏”状态的 The Component is "unhidden"
   默认下，许多组件是由CSS样式类如"x-hidden"设置隐藏的。如果 autoShow所配置的值为true，这时就不会有这个"hide"样式类作用在该组件上
5. 自定义的类、样式生效了 Custom class and/or style applied
   一切组件的子类都支持cls和style 两种特殊的配置属性，分别用于指定用户自定义的CSS样式类和CSS规则。 推荐指定cls的方法来制定组件及其各部分的可视化设置。由于该样式类会套用在组件markup最外的一层元素，所以标准CSS规则会继承到组件下任何子元素的身上。
6. 触发render事件 The render event is fired
   这是组件通知成功渲染的一个步骤。这时，你可肯定地认为组件的DOM元素是可用的了。如果尝试在渲染之前访问组件，会抛出一个不可用的异常。
7. 调用了afterRender方法 The afterRender method is called
   这是另外一个实现或重写特定所需的“后渲染”逻辑的模板方法。每个子类应调用superclass.afterRender.
8. 组件被隐藏或禁用（如果有的话） The Component is hidden and/or disabled (if applicable)
   配置项hidden和disabled到这步生效
9. 所有状态感知的事件初始化（如果有的话） Any state-specific events are initialized (if applicable)
   状态感知的组件可由事件声明特殊加载和保存状态。如支持，加入此类的事件。

销毁过程 Destruction

1. 触发beforedesroy事件 The beforedestroy event is fired
   这是个可取消的事件，指定的句柄（handler）可阻止组件被销毁。
2. 调用了beforeDestroy方法 The beforeDestroy method is called
   这是另外一个实现或重写预定销毁逻辑的模板方法。每个子类应调用superclass.beforeDestroy。
3. 元素及其侦听器被移除 Element and its listeners are removed
   若组件是渲染好的，所属的元素的事件侦听器和DOM树中的元素都会被移除。
4. 调用了onDestroy方法 The onDestroy method is called
   这是另外一个实现或重写特定所需的“后销毁”逻辑的模板方法。每个子类应调用superclass.onDestroy。注意 容器类（Container class，和一切容器的子类）提供了一个默认的onDestroy实现，自动遍历其items集合里的每一项，分别地执行子组件身上的destroy方法。
5. 在组件管理器中撤销组件对象的登记 Component is unregistered from ComponentMgr
   使得不能再从Ext.getCmp获取组件对象
6. 触发destroy事件 The destroy event is fired
   这是组件成功销毁的一个简单通知。此时组件已经DOM中已是不存在的了
7. 组件上的事件侦听器被移除 Event listeners on the Component are removed
   组件本身可允许从所属的元素得到事件侦听器。如有的话，连同删除。

组件的X类型 XTypes

XTypes是Ext 2.0中新的概念，被认为是Ext组件的特定类型。可用的xtype摘要可在 Component类API开始的地方找到。与一般JavaScript对象用法相似，XTypes可用于查找或比较组件对象，如isXType和getXType等的方法。 其中getXTypes的方法可列出任意组件的xtpye层次表。

然而，Xtypes最大的用途是怎么用于优化组件的创建和渲染过程。 通过指定一个xtype的配置对象的写法，可隐式声明的方式创建组件，使得当不需要立即渲染的情况就只是一个对象，省去不必要的实例化步骤。这时不仅渲染的动作是延时的，而且创建实际对象的这一步也是延时的，从而节省了内存和资源。 在复杂的布局中，这种性能上的改进尤为明显。

//显式创建所容纳的组件
var panel = new Ext.Panel({
   ...
   items: [
      new Ext.Button({
         text: 'OK'
      })
   ]
};
 
//使用xtype创建
var panel = new Ext.Panel({
   ...
   items: [{
      xtype: 'button',
      text: 'OK'
   }]
};

第一个例子中，面板初始化的同时，按钮总是会立即被创建的。 如果加入较多的组件，这种方法很可能减慢的渲染速度。 第二例子中，按钮直到面板真正在浏览器上需要显示才会被创建和渲染。

如果面板从未显示（例如有个tab一直是隐藏的），那么按钮就不会被创建，不会消耗任何资源了。

BoxComponent

BoxComponent 是另外一个重要的基类，该类从组件Component扩展，为任何要进行可视渲染和参与布局的组件提供了一致的、跨浏览器的箱子模型（Box Model）实现。BoxComponent负责调节大小和定位，自动处理各浏览器之间的差异，如外/内补丁、边框的问题，形成一个统一的箱子模型，以支持各种浏览器。2.0的一切容器类（container）继承自BoxComponent。

容器模型Container Model

Ext 2.0 Component/Container Class Hierarchy

容器 Container

一个组件如果有包含其它的组件，那么，容器Container便是这个组件奠基之石。该类提供了布局方面和调节大小、嵌套组所需的逻辑，并且提供一个基础性的加入组件协调机制。容器类不应该直接使用，其目的在于为一切可视的容器组件提供一个基类。

面板 Panel

面板Panel是2.0最常用的容器，90％布局任务都离不开面板。布局里的排版元素便是面板，面板如同一张白纸，完全是空白的矩形，没有可视内容。虽然这样，面板也提供了一些预留区域， 方便加入程序所需的UI界面，包括顶部或底部的工具条、菜单栏、头部区域、底部区域和躯干区域。同时内建可展开和可收缩行为的按钮，和其它不同任务预设的按钮。面板可轻松地下降到任意的容器或布局，当中定位或渲染的逻辑全部由Ext调控，

下列是Ext 2.0面板最主要的几个子类：

• GridPanel
• TabPanel
• TreePanel
• FormPanel

Window

Window 是一种可浮动的、可最小/最大化的、可复原的、可拖动的..等此类的特殊面板。其目的在于实现一种具有桌面风格的程序界面的基类，像Ext桌面演示看到的那样。

视见区Viewport

http://extjs.com/deploy

分享到：

常用查看计算机端口相关命令 | 实现JAVA中String.trim()方法

• 2010-12-14 11:07
• 浏览 742
• 评论(0)
• 分类:Web前端
• 查看更多