学习YUI.Ext 第四天--开始使用Grid

 

概述: 本教程将以XML为数据源，带你进入Grid的世界。

本文涉及的范例代码，可以在这里下载。一个完成好的例子可在这里找到。

步骤一 定义数据(Data Definition)
首先要让Grid知道XML文档定义了每一行是什么数据。正如所见，我们命名了"item"在下面的XML样本中。

单行的XML样本数据

view plain copy to clipboard print ?

1. <Item>  
2.  <ASIN>0446613657</ASIN>  
3.  <DetailPageURL>http://www.amazon[*SNIP*]JVQEG2</DetailPageURL>   
4.  <ItemAttributes>  
5.   <Author>Sidney Sheldon</Author>  
6.   <Manufacturer>Warner Books</Manufacturer>  
7.   <ProductGroup>Book</ProductGroup>  
8.   <Title>Are You Afraid of the Dark?</Title>  
9.  </ItemAttributes>  
10. </Item>  

<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文件中顺序一致。

view plain copy to clipboard print ?

1. var  dataStore =  new  Ext.data.Store({   
2.   
3.     proxy: new  Ext.data.HttpProxy({url:  'sampledata-sheldon.xml' }),   
4.   
5.     reader: new  Ext.data.XmlReader({  
6.            record: 'Item' ,  
7.            id: 'ASIN'   
8.        }, [  
9.            'Author' ,  'Title' ,  'Manufacturer' ,  'ProductGroup'   
10.        ])  
11. });   

    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来代替。

列模型样本

view plain copy to clipboard print ?

1. var  colModel =  new  Ext.grid.ColumnModel([  
2.  {header: "Author" , width: 120, dataIndex:  'Author' },  
3.  {header: "Title" , width: 180, dataIndex:  'Title' },  
4.  {header: "Manufacturer" , width: 115, dataIndex:  'Manufacturer' },  
5.  {header: "Product Group" , width: 100, dataIndex:  'ProductGroup' }  
6. ]);  

 
 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工作起来的所有因素！

进行渲染！

view plain copy to clipboard print ?

1. var  grid =  new  Ext.grid.Grid( 'mygrid' , {  
2.     ds: dataStore,  
3.     cm: colModel  
4. });  
5. grid.render();   
6.   
7. dataStore.load();   

 
    var grid = new Ext.grid.Grid('mygrid', {
        ds: dataStore,
        cm: colModel
    });
    grid.render(); 

    dataStore.load(); 

 

译者姓名：Frank
译者博客：http://www.ajaxjs.com/blog/