翻譯：Frank

概述: 本教程將以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();

本文轉自:http://www.ajaxjs.com/yuicn/article.asp?id=20075866

---------------------------------------------------------------------------------------------------------------------------------
說人之短，乃護己之短。夸己之長，乃忌人之長。皆由存心不厚，識量太狹耳。能去此弊，可以進德，可以遠怨。
http://www.aygfsteel.com/szhswl
------------------------------------------------------------------------------------------------------ ----------------- ---------