EXT 第三天（容器模型）

容器模型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

视见区Viewport是以document.body作容器的实用类，它会与浏览器视图自适应尺寸，是全屏幕应用的基础，如浏览器大小调节、布局重新计算的问题由该类自动完成。 注意视见区Viewport除了document.body元素外不能渲染在其它的容器上，所以一个页面只能有一个视见区。

布局 Layouts

Ext 2.0 Layout Class Hierarchy

引言

2.0中最具意义的改进之一。在创建优雅的程序布局时感受到易用性或灵活性方面带来的好处。 在Ext 1.x，布局的开发集中围绕在BorderLayout、Region和ContentPanel几个类。 1.x BorderLayout已经可以方便地生成UI，但要真正创建属于自己的布局，还是没有足够的支持。 创建复杂的布局通常需要手工编写一些代码应付滚动条、嵌套和某些怪癖的问题。

Ext 2.0带来了一个重写编写的、企业级应用的布局管理系统。 共有10种风格的布局管理器，分别提供构建各种可能的程序布局基础。Ext调控了布局诸如size、定位、滚动条和其他的属性方面的问题，一如既往地简单，开箱即用。 在容器也可无限嵌套布局、混合其他不同风格的布局。

布局由容器内置创建，所以布局不应通过关键字new实例化这种方式直接使用。 有一种内部的机制，容器与布局能够很好地协调工作—只需配置好相关的参数，容器就会委托其负责的布局类工作。 创建容器的时候，你应选定一种布局的风格以及相关的配置，这两个配置是属性layout和属性layoutConfig。 举例：

var panel = new Panel({
    title: 'My Accordion',
    layout: 'accordion',  //在这个面板中所使用的布局样式
    layoutConfig: {
        animate: true     //布局指定的配置项写在这里
    }
    // 其他Panel的选项
});

当你创建嵌套布局时，明白面板包含其他面板是很重要的，布局中的每个面板必须指定一个布局管理器。 多数情况你不需要指定布局的风格如“border”或“accordion”，较常见的是“fit”那一种，会自动调整大小自适应它的容器。 如果你不指定某个布局管理器，默认的是ContainerLayout类，不过这样很可能导致一些意料不到的情况发生，所以最好精确声明一下。

 

每种布局类都支持其特定的配置选项。 关于布局每种配置选项可参考API文档。

布局管理器 Layout Managers

	CONTAINERLAYOUT 其它一切布局管理器的基类，容器若不指定某个布局管理器，则默认的管理器就是这个ContainerLayout。ContainerLayout没有任何的外观表示— 其主要的职责是容纳子项目、控制渲染和一些常见任务，如调节大小缓冲（resize buffering）。 ContainerLayout常用于扩展制定的布局，很少实例化直接使用。详细在API 参考.		CARDLAYOUT CardLayout将容器中的每个组件当作一个卡片来处理。在某一时间，只有一个卡片是可见的，容器象一个卡片堆栈一样工作。大多数的情况，用于向导（Wizards），制定的tab实现或其它多页面信息的场合。参阅API 参考。
	ABSOLUTELAYOUT 这是一个非常简单的布局，通过X/Y坐标精确来定位包含各项的相关容器。 参阅API 参考.		COLUMNLAYOUT 适用于多个列并排结构的布局风格，每个列的宽度须由像素值或百分比指定，但高度自适应于内容的高度。 详细在API参考.
	ACCORDIONLAYOUT AccordionLayout包含了一组像卡片垂直方向堆栈的面板，同通过展开或收缩来显示内容。在某一时间，只有一个卡片是可见的。 详细在API参考。		FITLAYOUT 这是一个简单的布局，主要是创建一个适应容器大小的布局区域。如没有特定的布局要求这是容器最好的默认布局。 详细在API参考.
	ANCHORLAYOUT 这是为一些固定元素相对于容器四条边的布局。 元素可通过与边缘的百分比或便宜一个值来定位，并支持相当于物理容器有不同尺寸的“虚拟层画布（virtual layout canvas）”。 详细在API文档。		FORMLAYOUT FormLayout是为创建一张要提交数据条目的表单而设计的布局风格。 注意，一般来讲，和FormPanel相似，此布局类都有表单提交的自动处理，但你会更倾向使用前者。 FormPanels必须指定layout:'form'（只能一定是这样）,所以表单额外需要一个布局将其嵌套。 参阅API文档。
	BORDERLAYOUT 与1.x的BorderLayout的布局完全一致。布局区域支持嵌套， 滑动条面板和可关闭、微调的分隔区域。 对于一些典型业务程序的UI尤为适用。详细API文档。		TABLELAYOUT 主要目的是通过一个表格的形式划分区域。实际上也是生成一个table的HTML makeup 详细在API参考。

Grid

概述

2.0中的GridView有极大的改进，而Grid的UI部分，正是由GridView这个类来实现的。2.0中GridView最主要的新功能有：

• 效能的提升
  GridView的底层结构和渲染代码已在2.0完整重构过，并侧重考虑了效能部分。正因性能的原因，锁定列的这一功能已经取消（参阅下一节）。
• 感观（look and feel）的改进
  和新2.0的主题一起， Grid的外观控制也有新变化，使得Grid比以前更时尚和看上去更具吸引力。
• 单行归组
  多个行可被归组到某一指定列，由用户重新归组亦可。
• 多行组摘要
  每一组可相应的提供一个数据摘要组
• 进阶插件支持
  在2.0中，新加入插件机制。GridView就是这种插件机制的一个典型例子。如范例中所示，Grid优秀的功能便是依靠几个预先做好的插件。插件RowExpander提供了展开、收缩行的功能，插件RowNumberer就提供了行中数字的支持。

列锁定的注意事项（Column Locking）

有些用户或许发现Ext 1.x中列锁定的功能，到2.0因为已经取消，并可以说以后也不再支持了。列锁定（Column locking），虽然对某些用户来说有其的用途， 但与2.0 GridView的新功能有不兼容的地方（如归组、摘要等），而且为了实现锁定会使得Grid渲染性能开销增大。 因此，1.x gridView这功能的向上升级，或打补丁，均不会由官方支持。

注意：当前有为2.0而做的用户扩展在进行中，以实现2.0的列锁定，而且看上去写得还蛮不错。更多有用资讯可论坛的帖子找到。

XTemplate

XTemplate使用了多种标签和特殊操作符支持模板，使得模板在应付复杂的数据结构时尤为健壮。这里所列出的高度概括的几项功能，欲了解完整的细节和使用方法，请参阅XTemplate API文档.

• 自动数组填充和作用域切换
• 可在子模板作用域内访问父级对象
• 可访问数组索引
• 支持数据值的简单匹配
• 自动渲染浮点型数组（不包含非对象的值）
• 基础性的条件逻辑符号if
• 可执行模板中直接写好的任意语句
• 支持模板的配置属性
• 可通过配置项对象自定义模板方法
• 可用于服务端的JavaScript模板

DataView

从表面上看，DataView跟1.x的View类非常相似。两者都支持模版数据渲染，Data store数据绑定和内建的选区模型和事件。但是， 随着2.0新架构的设计，DataView赋予了更强大的功能。 下面是这次最重要的改动：

• 继承自BoxComponent
  1.x View类继承自Observable, 作为独立组件而言工作不错， 但是它并没提供内建的机制与其他组件融合的能力。而DataView就是针对这种不足作出的改进，该类从BoxComponent继承，因此如前文所述，也具备一般组件的生存周期控制。
• 发挥了XTemplate之功效
  1.x View类采用了1.x本身的模版类Template 。较好满足了view自身的需求，但是难以满足一些复杂的渲染任务。DataView采用的模版类也升级到2.0的XTemplate，可轻松定制UI应付复杂的数据。
• 新增的配置选项
  DataView 提供了更为灵活的－几个新选项：
  • itemSelector: 必须是一个DomQuery选择符告知该类究竟如何分辨出每个item。相比1.x的做法带来更高的灵活性和更高的速度。
  • simpleSelect: 一种新的选区生成模式，使得用户无须按下Shift或Ctrl键便可进行多选。
  • overClass: 一个CSS的样式类，每个元素onmouseover和onmouseout时生效。
  • loadingText:像其他绑定store的Ext组件一样，DataView支持标准的遮罩效果。

其它新组件

一些有趣的新组件也加入到2.0中去了。要了解这些新组件到底有什么新功能，最好还是看看API文档完整的介绍。

动作 Action

动作Action是一种从组件中抽象出来的可复用的“功能块”，即多个组件之间的同一功能都来自这个ACTION的实现。 动作允许你共享句柄（handlers），配置选项和UI的更新，所有组件均支持动作的接口（主要是Toolbar，Button和 Menu组件）。 详细在API文档。

CycleButton

这是一个包含复选元素菜单的特制的SplitButton。当菜单子项每次被单击，按钮都会轮回一次状态，触发change的事件（或调用按钮的changeHandler函数，如果有的话）以激活菜单项。 FeedViewer演示程序就包含了该例子— 预览窗口地址的那个按钮就是一个SplitButton。详细在API文档。

Hidden (field)

这个便是HTML表单中隐藏域的一个简单的实现，能够以EXT FORM组件般操控。详细在API参考。

进度条 ProgressBar

1.x中的进度条是简单地内建在MessageBox类中。 现在已重构为单独的器件并有进一步的改进。 它支持两种不同的模式（手动和自动进度），而且LOOK and FEEL方面可轻松制定。 详细在API参考。

TimeField

这是下拉列表时间选取器的简单实现。详细在API参考。