学习EXT第四天--开始使用Grid

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

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

步骤一 定义数据(Data Definition)

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

XML样本数据文件名：sheldon.xml

<?xmlversion="1.0"encoding="UTF-8"?>
<ItemSearchResponsexmlns="http://webservices.amazon.com/AWSECommerceService/2006-06-28">
<OperationRequest>
<HTTPHeaders>
<HeaderName="UserAgent"
Value="Mozilla/4.0(compatible;MSIE7.0;WindowsNT5.1;AvantBrowser;AvantBrowser;.NETCLR1.0.3705;.NETCLR2.0.50727;.NETCLR1.1.4322;MediaCenterPC4.0;InfoPath.2)"></Header>
</HTTPHeaders>
<RequestId>18CZWZFXKSV8F601AGMF</RequestId>
<Arguments>
<ArgumentName="Service"Value="AWSECommerceService"></Argument>
<ArgumentName="AssociateTag"Value="ws"></Argument>
<ArgumentName="SearchIndex"Value="Books"></Argument>
<ArgumentName="Author"Value="SidneySheldon"></Argument>
<ArgumentName="SubscriptionId"Value="1A7XKHR5BYD0WPJVQEG2"></Argument>
<ArgumentName="Version"Value="2006-06-28"></Argument>
<ArgumentName="Operation"Value="ItemSearch"></Argument>
</Arguments>
<RequestProcessingTime>1.05041599273682</RequestProcessingTime>
</OperationRequest>
<Items>
<Request>
<IsValid>True</IsValid>
<ItemSearchRequest>
<Author>SidneySheldon</Author>
<SearchIndex>Books</SearchIndex>
</ItemSearchRequest>
</Request>
<TotalResults>203</TotalResults>
<TotalPages>21</TotalPages>
<Item>
<ASIN>0446355453</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446355453%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446355453%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>SidneySheldon</Author>
<Manufacturer>WarnerBooks</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>MasteroftheGame</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446613657</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446613657%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446613657%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>SidneySheldon</Author>
<Manufacturer>WarnerBooks</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>AreYouAfraidoftheDark?</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446357421</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446357421%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446357421%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>SidneySheldon</Author>
<Manufacturer>WarnerBooks</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>IfTomorrowComes</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446607207</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446607207%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446607207%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>SidneySheldon</Author>
<Manufacturer>WarnerVision</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>TellMeYourDreams</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446357448</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446357448%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446357448%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>SidneySheldon</Author>
<Manufacturer>WarnerBooks</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Bloodline</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446532673</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446532673%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446532673%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>SidneySheldon</Author>
<Manufacturer>WarnerBooks</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>TheOtherSideofMe</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446356573</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446356573%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446356573%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>SidneySheldon</Author>
<Manufacturer>WarnerBooks</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>AStrangerintheMirror</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0060198346</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0060198346%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0060198346%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>SidneySheldon</Author>
<Manufacturer>WilliamMorrow&amp;Company</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>TheSkyIsFalling</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446354732</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446354732%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446354732%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>SidneySheldon</Author>
<Manufacturer>WarnerBooks</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>NothingLastsForever</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446341916</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446341916%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446341916%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>SidneySheldon</Author>
<Manufacturer>WarnerBooks</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>TheNakedFace</Title>
</ItemAttributes>
</Item>
</Items>
</ItemSearchResponse>

接着需要定义某一列为“统一标识（Unique Identifier）”,即ID,根据“id"所设置的那个节点来读取值（样本代码第九行）。本例中的样本数据是”ASIN"列。

数据定义的最后部分就是指定你需要显示的字段(Fields),把这些字段放到一个数组之中，并保证这些字段与你的XML数据中元素名称是一致的，而且还要注意先后顺序，这里的顺序不需要和XML文件中顺序一致。

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

步骤二 列模型（Column Model）

下一步便是定义Column Model 列模型。简单地说，就是通过一些属性的设置，决定每一列怎么控制或怎么显示，这是一个由每列的配置参数组成的数组。注意，出现的顺序应该与刚才定义“字段”的数组一致。较常见的参数通常是header和width，所以你会觉得这两项是必须要设置的，然而宽度（width）其实不总是需要的，因为稍后我们将使用autoWidth/Height来代替。

列模型样本

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

进行渲染！

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

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

在body部分加入：

<divid="GridXml"></div>