學習EXT第四天--開始使用Grid

概述: 本教程將以XML爲數據源，帶你進入Grid的世界。

本文涉及的範例代碼，可以在這裏下載。一個完成好的例子可在這裏找到。

步驟一定義數據(Data Definition)

首先要讓Grid知道XML文檔定義了每一行是什麼數據。正如所見，我們命名了"item"在下面的XML樣本中。

XML樣本數據文件名：sheldon.xml

<?xml version="1.0" encoding="UTF-8"?>

<Header Name="UserAgent"

Value="Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Avant Browser; Avant Browser; .NET CLR 1.0.3705; .NET CLR 2.0.50727; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)"></Header>

</HTTPHeaders>

<RequestId>18CZWZFXKSV8F601AGMF</RequestId>

</Arguments>

</OperationRequest>

<Items>

<Author>Sidney Sheldon</Author>

<SearchIndex>Books</SearchIndex>

</ItemSearchRequest>

</Request>

<Item>

http://www.amazon.com/gp/redirect.html%3FASIN=0446355453%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446355453%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2

</DetailPageURL>

<Author>Sidney Sheldon</Author>

<Manufacturer>Warner Books</Manufacturer>

<Title>Master of the Game</Title>

</ItemAttributes>

</Item>

<Item>

http://www.amazon.com/gp/redirect.html%3FASIN=0446613657%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446613657%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2

</DetailPageURL>

<Author>Sidney Sheldon</Author>

<Manufacturer>Warner Books</Manufacturer>

<Title>Are You Afraid of the Dark?</Title>

</ItemAttributes>

</Item>

<Item>

http://www.amazon.com/gp/redirect.html%3FASIN=0446357421%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446357421%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2

</DetailPageURL>

<Author>Sidney Sheldon</Author>

<Manufacturer>Warner Books</Manufacturer>

<Title>If Tomorrow Comes</Title>

</ItemAttributes>

</Item>

<Item>

http://www.amazon.com/gp/redirect.html%3FASIN=0446607207%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446607207%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2

</DetailPageURL>

<Author>Sidney Sheldon</Author>

<Manufacturer>Warner Vision</Manufacturer>

<Title>Tell Me Your Dreams</Title>

</ItemAttributes>

</Item>

<Item>

http://www.amazon.com/gp/redirect.html%3FASIN=0446357448%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446357448%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2

</DetailPageURL>

<Author>Sidney Sheldon</Author>

<Manufacturer>Warner Books</Manufacturer>

<Title>Bloodline</Title>

</ItemAttributes>

</Item>

<Item>

http://www.amazon.com/gp/redirect.html%3FASIN=0446532673%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446532673%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2

</DetailPageURL>

<Author>Sidney Sheldon</Author>

<Manufacturer>Warner Books</Manufacturer>

<Title>The Other Side of Me</Title>

</ItemAttributes>

</Item>

<Item>

http://www.amazon.com/gp/redirect.html%3FASIN=0446356573%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446356573%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2

</DetailPageURL>

<Author>Sidney Sheldon</Author>

<Manufacturer>Warner Books</Manufacturer>

<Title>A Stranger in the Mirror</Title>

</ItemAttributes>

</Item>

<Item>

http://www.amazon.com/gp/redirect.html%3FASIN=0060198346%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0060198346%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2

</DetailPageURL>

<Author>Sidney Sheldon</Author>

<Manufacturer>William Morrow & Company</Manufacturer>

<Title>The Sky Is Falling</Title>

</ItemAttributes>

</Item>

<Item>

http://www.amazon.com/gp/redirect.html%3FASIN=0446354732%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446354732%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2

</DetailPageURL>

<Author>Sidney Sheldon</Author>

<Manufacturer>Warner Books</Manufacturer>

<Title>Nothing Lasts Forever</Title>

</ItemAttributes>

</Item>

<Item>

http://www.amazon.com/gp/redirect.html%3FASIN=0446341916%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446341916%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2

</DetailPageURL>

<Author>Sidney Sheldon</Author>

<Manufacturer>Warner Books</Manufacturer>

<Title>The Naked Face</Title>

</ItemAttributes>

</Item>

</Items>

</ItemSearchResponse>

接着需要定義某一列爲“統一標識（Unique Identifier）”,即ID,根據“id"所設置的那個節點來讀取值（樣本代碼第九行）。本例中的樣本數據是”ASIN"列。

數據定義的最後部分就是指定你需要顯示的字段(Fields),把這些字段放到一個數組之中，並保證這些字段與你的XML數據中元素名稱是一致的，而且還要注意先後順序，這裏的順序不需要和XML文件中順序一致。

var dataStore = new Ext.data.Store({
            proxy : new Ext.data.HttpProxy({url: 'XML/sheldon.xml'}),
            reader : new Ext.data.XmlReader(
                {record : 'Item',id : 'ASIN'},
                ['Author','Manufacturer','ProductGroup','Title']
            )
        });

步驟二列模型（Column Model）

下一步便是定義Column Model 列模型。簡單地說，就是通過一些屬性的設置，決定每一列怎麼控制或怎麼顯示，這是一個由每列的配置參數組成的數組。注意，出現的順序應該與剛纔定義“字段”的數組一致。較常見的參數通常是header和width，所以你會覺得這兩項是必須要設置的，然而寬度（width）其實不總是需要的，因爲稍後我們將使用autoWidth/Height來代替。

列模型樣本

var colModel = new Ext.grid.ColumnModel([
        {header : "Author",width:120,dataIndex:'Author'},
        {header : "Manufacturer",width:180,dataIndex:'Manufacturer'},
        {header : "ProductGroup",width:115,dataIndex:'ProductGroup'},
        {header : "Title",width:100,dataIndex:'Title'}
        ]);

最後是將DataStore和Column Model兩樣東西傳入到Grid，渲染結果，然後加載來自DataStore的數據，這些就是你讓Grid工作起來的所有因素！

進行渲染！

var grid = new Ext.grid.GridPanel({
            el : 'GridXml',
            ds : dataStore,
            cm : colModel,
            height:350,
            width:600
        });

        grid.render();
        dataStore.load();

在body部分加入：

學習EXT第四天--開始使用Grid

步驟一定義數據(Data Definition)

步驟二列模型（Column Model）

列模型樣本

進行渲染！

學習Ext第一天(Ext 簡介)

學習EXT第四天--開始使用Grid

剛剛發表的文章不在了，是不是現在blog發表有延時呢？

學習EXT第五日--Grid組件的簡易分頁

學習EXT第三天:Menu組件

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

學習EXT第四天--開始使用Grid

步驟一 定義數據(Data Definition)

步驟二 列模型（Column Model）

列模型樣本

進行渲染！

步驟一定義數據(Data Definition)

步驟二列模型（Column Model）