From Sencha - Learn

Web程序中最常用的组件应该是table表格或者不同类型的Grid。总有一些数据是需要显示和操纵的。不幸地是，当前的YUI并不支持任何的Grid或table组件。在打后的贴子中，我将会与大家简明扼要地谈谈创建Grid组件的过程， 和一些新增的功能。很希望能得到你的反馈，或者你下一版本期望的功能 。

第一件要决定的事情是，使用内置Grid会有什么方法类型。在工作过程中，我用过很多方法实现Grid或table，大多数都是用相同的原理（逻辑、核心UI和数据分离）。其中我熟悉的是Swing JTable的那种方式。其原理是分离数据的核心UI和分离逻辑选区(logic for selection)和单元格的渲染/编辑(Render/Editing)。有个这些知识在手，我决定仿造Swing JTable,从Grid架构的建模开始。

核心架构由五部分组成：

* Grid-包含核心逻辑层 和 marshalls事件

* GirdView -Grid的UI层。亦负责处理添加、插入、移除一行；

* DataModel -很明显是数据源，包含内容发生改变时，通知Grid的事件机制；

* ColumnModel-定义表头（column）,如何渲染和它们的属性；

* SelectionModel-负责处理用户与gird的交互。例如，行选择和键盘控制(keyboard navigation);

如果能像Swing JTable般设计，分离每一块到属于它自己的实体（entites），那么我们可以针对性地扩展Grid组件，以达到目的。还可以不修过核心的情况下，修改Grid的每一部分（piexes）。如此一来，我们将来便可方便地新增Grid功能。

DataModel包含的类如下：

看上去，这分得很详细，详细到好像过于复杂。但是在我看来，对于提升代码的可再用和扩展性，建立一个结实的DataModel是尤其重要的部分。正是基于这种方法，DataModel便能为其它的组件可再用，而不需要太多的组件--尽管它是庞大的。

这是一些已实现的功能：

• 完整的SelectionModel支持 行选择、转移和多行选区的控制键。 试试敲敲你的键盘~ 丰富的API支持 selectRange, selectById, selectNext, clearSelections, selectAll 等等；
• 支持内容和UI自动同步、客户端自定义排序等等。当有需要更新的时候，醒目的事件机制会通知UI作出刷新，而且准备好一份API,以便操控model里面的数据（即为你自动处理事件的句柄）。这样的话，做起AJAX很轻松。
• 轻松地调用DefaultColumnModel，为你准备好完善的API和事件控制机制；
• 可锁定表头lock header；
• 全面支持CSS换肤技术和quirks 与strict 两种模式；
• 支持绑定Grid到某个字段（如 隐藏字段 field），而仍然有到field的selections。这使得拖动多选区的form成为可能；
• 可运行在IE 6 & 7、FIRE FOX 1.5和OPERA 9中，其它浏览器就没有试过了（我没有MAC机所以没有Safari）。如果你有其它的浏览器，请POST你的使用感受给我~拜托了！

如果你打开Js文件观察的话，将会发现只需几行代码便可设置XMLDataModel:

var schema = {
    tagName: 'Item',
    id: 'ASIN',
    fields: ['Author', 'Title', 'Manufacturer', 'ProductGroup']
};
this.dataModel = new YAHOO.ext.grid.XMLDataModel(schema);

实际加载的数据：

// 参数可以是url encoed或对象类型
var params = {'author': author};
//回调函数清除loading
this.dataModel.load('/blog/examples/amazon.php', params, this.clearIndicator);

表头能够对Grid排序。现在进行新一番的搜索，例如输入John,数据加载后仍然按照你指定的方式排序。这是新的功能。

在一个实际项目中，我们需要一个能提供回调参数的，方便的异常处理机制。LoadableDataModel就就包含这种事件（onLoadException） 。

总的来说，一切进展顺利。有些Part1的反馈告诉，Gird在Safari和其它浏览器上能够工作^^。说真的,有些反馈真的不错！ thanks!

This page was last modified on 20 August 2008, at 09:07. This page has been accessed 9,426 times.