1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // grid which supports column locking
// just need to specify the locking version of the column model and grid view
var grid = new Ext.grid.GridPanel(
{
store: dinnerData,
colModel: new Ext.ux.grid.LockingColumnModel( [
{ header: "Name", dataIndex: "name", id: "colName" },
{ header: "Arrival Date", dataIndex: "arrivalDate" },
{ header: "Dinner Choice", dataIndex: "dinnerChoice" }
] ),
view: new Ext.ux.grid.LockingGridView(),
title: "Event Planner",
width: 350,
height: 250
}
);
|
下一个网格特性省了我不少事。我通常要用到 Minimum Data Set (MDS)，这是 U.S.Centers for Medicare and Medicaid Services 的一种文件规范。该文件规范用来表示用于所有居民的获准参与医疗保险和医疗救助的专业护理设施的筛选和评估工具。可以想象，这样的政府文件规范很严格，包含 700 个评估字段。我曾经做过在一个网格中允许浏览所有 MDS 评估字段元数据的 Ext JS 项目，但在滚动内容和改变面板大小时遇到性能问题。这时新的网格 BufferView 救了我。通过将标准网格视图换成缓存视图，只改了一两行代码，程序运行如常。BufferView 只提交可见网格的单元格，而不是在改变布局大小时连续提交 700 行数据，而这只是其中一部分。这项特性也是 UX，并作为实验性的；尽管如此，其实用性却让我甘愿冒这个险，在内部应用程序中使用。 
对列标题分组将会使网格数据看上去更清晰更灵活。图 3 就是一个例子。 
图表Ext JS 中另一个大的全新特性就是图表。基于 YUI Library 的图表引擎，Ext JS 图表是基于 Adobe Flash 的。它们利用了 Ext JS 数据存储的能力和库中一个用于将数据连接到其他 UI 组件（如网格）的通用对象。有了对如折线图、柱状图、饼图、堆叠条形图的图表类型的支持，Ext JS 图表在很多应用程序中有了用武之地。但是，要实现更高级的图表，还要考虑实现更成熟的引擎，比如 Adobe Flex 中的那些引擎。 图 4 演示了 Ext JS 中的这三种图表。 
布局Ext JS 中增加的还有 HBox 和 VBox 布局以及 ListView 控件。HBox 和 VBox 是原先就有的简单的水平和竖直布局管理器。由于有了对间距和对齐配置的很好支持，这些布局类似于其他富应用程序框架（如 Flex 和 Microsoft® Silverlight）中所支持的布局。 
工具栏、菜单和表单工具栏有两项关键的更新让我觉得很酷。第一项是自动处理工具栏项溢出。当容器缩放导致工具栏项目切除时，Ext JS 通过创建额外工具栏项目菜单来自动处理这种溢出。这项特性很简单但很有用，因为可以不必考虑自己处理。现在工具栏还可以将按钮分组，从而形成带状工具栏。按钮可由不同类型组合而成，并支持各种布局。