原文地址 文章日期：2006/09/04
新组件Gird包含了许多的类和继承方法。如果读者不是太熟悉的面向对象开发的话，可能会对一个变量如何从某个类得到继承的方法感到困惑，用起GIRD来感到困难。在YAHOO.ext.gird包中，大多数类是设计成为“即插即用plug and play”的,可扩展的extended和可自定义的customized,能以最小量的代码插入轻松到web程序中。
要测试和创建一个实现gird的范例，我决定做一个简单的，只有一页的RSS种子采集器RSS Feed Viewer。整个程序写了100行代码而其中有20行是关于gird的。这个范例说明了gird的一些典型功能，如Ajax loading,预处理（preprocessing）和自定义渲染（custom rendering）
这里嵌入了个迷你型程序（用iframe）
我一步一步手把手带你进入GIRD,还会支持哪些是关键的地方，哪些不是。
Step 1 创建柱模型ColumnModel
var myColumns = [
{header: "Title", width: 350, sortable: true},
{header: "Date", width: 125, sortable: true, renderer: formatDate}
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);
GRID从柱模型中取得某一列的信息。在这个例子我们调用一个默认的柱模型（称DefaultColumnModel）,一个包含所有相关的信息的对象。对象的属性如下：
除header和width其它为可选的
创建DataModel数据模型
var schema = {
tagName: 'item',
id: 'use-index',
fields: ['title', 'pubDate']
};
this.dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
this.dataModel.addPreprocessor(1, parseDate); //列1是日期，先预处理一下
this.dataModel.onLoad.subscribe(this.onLoad, this, true);
this.dataModel.onLoadException.subscribe(this.showError, this, true);
this.dataModel.setDefaultSort(colModel, 1, 'ASC');
DataModel是GIRD的数据来源。所有在 YAHOO.ext.grid包中的DataModels，都有一系统通知UI改变内容的事件。也就是说你可以改变model内的数据，而同时对UI自动映射。
这个范例中我们使用XMLDataModel。XMLDataModel提供一个简易的方式来映射XML文档与gird之间的结构。你所要做的是写个简单的schema,让model知道有哪些column给gird。Schema有下列属性：
接着我们加入一个自定义的预处理器函数（ a custom preprocessor）。如果只是对日期排序，不用这个函数，也是没问题的(默认它自己也会排序)。用的好处是效率更高。要注意的是，必须在 数据成为model数据一部分之前使用这个函数。所有RSS FEED和XML实质都是字串符Strings,如果要让JAVASCRIPT分析，应该先要类型转换，我们加入一个预处理器来转换到JAVASCRIPR类型，然后放到DataModel中。
下面说说DataModel事件和默认排序（译注：好像没有排序），较易理解的内容。
Step 3: 创建Grid
this.selModel = new YAHOO.ext.grid.SingleSelectionModel();
this.selModel.onRowSelect.subscribe(this.showPost, this, true);
this.grid = new YAHOO.ext.grid.Grid('feed-grid', this.dataModel, colModel, this.selModel); this.grid.render();
首先我们创建一个SingleSelectionModel。原因是我们想在同一时间内，限制只有一个选区是被选中的。如果你不想要这种限制，忽略相关代码便可，不指定的情况下gird会自动创建DefaultSelectionModel。
SelectionModel暴露了两个事件：onRowSelect 和 onSelectionChange。onRowSelect当某一行选中或反选时触发，还有一个参数允许你传入，以便得知哪一个行被选中或反选。onSelectionChange当Gird的选区发生改变时触发。两者最主要的区别，当超过一行被选中（同一时间内），选区的每一行会触发各自的事件，而onSelectionChange只会在多选区完成选择后，触发一次事件。更多关于这两个事件的细节，请参阅文档。
现在创建我们的Gird对象。第一个参数传入Grid构建函数的是被渲染的container(又作holder:架子、载体、Grid的承受者,在MVC中大量使用)。Container必须指定高度和宽度，如果没有设置绝对/相对的定位,GIRD会设置"相对"。接下的第二和第三的参数是Step 1、 Step2 的对象。
然后我们开始渲染render()。事件上渲染grid到container。在render()调用之前，任何的效果如隔行换色、MouseOver换色等等的必须设置好。尽管数据和选区是事件驱动的，可是一经渲染便不能改变。所以这方法只调用一次。遗憾的是，你不能渲染多个同是一个grid的containers，即grid实例是不可再用的。
Step 4 - 加载一些数据
this.dataModel.load('feed.php', {feed: 'http://feeds.feedburner.com/ajaxian'});
创建好XMLDataModel之后，这个方法方可调用。我的建议是在所有东西创建好之后调用该方法，这样的话，用户看到GIRD 的UI之前，数据已经加载好。
load()带有三个方法。URL(必选),参数（可选），回调（可选）。参数亦可以经过编码的encoded字串符 (param1=one¶m2=two) ，或是一个object(例子便是)。如果是对象，发送之前会将其键和值编码成URI。
然后我们开始渲染render()。事件上渲染grid到container。在render()调用之前，任何的效果如隔行换色、MouseOver换色等等的必须设置好。尽管数据和选区是事件驱动的，可是一经渲染便不能改变。所以这方法只调用一次。遗憾的是，你不能渲染多个同是一个grid的containers，即grid实例是不可再用的。
如果你已经有XML文档的话，就可以直接加载，不用AJAX。load方法可以多次调用，替换或追加GRID数据。在view.js代码中你可见到当用户sumbit提交feed form时的load()调用。
创建一个GRID和AJAX加载的代码行数不超过20行，而且是直来直去不绕弯的。虽然这还未能足以发挥GIRD全部威力，但希望这小小的例子能帮助你开始入门。不要被这些类难到你。大多数这些类是在内部使用的，或者你要自定义GIRD或扩展GIRD,都无需修过核心。
完整的 feed-viewer.js下载 here. CSS 这里欲查看HTML源，在IFRAME上右键，应该会有“查看源代码”的选项。
