概述: 本教程将以XML为数据源,带你进入Grid的世界。
本文涉及的范例代码,可以在这里下载。一个完成好的例子可在这里找到。
步骤一 定义数据(Data Definition)
首先要让Grid知道XML文档定义了每一行是什么数据。正如所见,我们命名了"item"在下面的XML样本中。
单行的XML样本数据
- <Item>
- <ASIN>0446613657</ASIN>
- <DetailPageURL>http://www.amazon[*SNIP*]JVQEG2</DetailPageURL>
- <ItemAttributes>
- <Author>Sidney Sheldon</Author>
- <Manufacturer>Warner Books</Manufacturer>
- <ProductGroup>Book</ProductGroup>
- <Title>Are You Afraid of the Dark?</Title>
- </ItemAttributes>
- </Item>
接着需要定义某一列为“统一标识(Unique Identifier)”,即ID,根据“id"所设置的那个节点来读取值(样本代码第九行)。本例中的样本数据是”ASIN"列。
数据定义的最后部分就是指定你需要显示的字段(Fields),把这些字段放到一个数组之中,并保证这些字段与你的XML数据中元素名称是一致的,而且还要注意先后顺序,这里的顺序不需要和XML文件中顺序一致。
- var dataStore = new Ext.data.Store({
- proxy: new Ext.data.HttpProxy({url: 'sampledata-sheldon.xml' }),
- reader: new Ext.data.XmlReader({
- record: 'Item' ,
- id: 'ASIN'
- }, [
- 'Author' , 'Title' , 'Manufacturer' , 'ProductGroup'
- ])
- });
步骤二 列模型(Column Model)
下一步便是定义Column Model 列模型。简单地说,就是通过一些属性的设置,决定每一列怎么控制或怎么显示,这是一个由每列的配置参数组成的数组。注意,出现的顺序应该与刚才定义“字段 ”的数组一致。较常见的参数通常是header和width,所以你会觉得这两项是必须要设置的,然而宽度(width)其实不总是需要的,因为稍后我们 将使用autoWidth/Height来代替。
列模型样本
- var colModel = new Ext.grid.ColumnModel([
- {header: "Author" , width: 120, dataIndex: 'Author' },
- {header: "Title" , width: 180, dataIndex: 'Title' },
- {header: "Manufacturer" , width: 115, dataIndex: 'Manufacturer' },
- {header: "Product Group" , width: 100, dataIndex: 'ProductGroup' }
- ]);
最后是将DataStore和Column Model两样东西传入到Grid,渲染结果,然后加载来自DataStore的数据,这些就是你让Grid工作起来的所有因素!
进行渲染!
- var grid = new Ext.grid.Grid( 'mygrid' , {
- ds: dataStore,
- cm: colModel
- });
- grid.render();
- dataStore.load();
译者姓名:Frank
译者博客:http://www.ajaxjs.com/blog/