学习EXT第四天--开始使用Grid
2008-01-14 11:39
495 查看
概述: 本教程将以XML为数据源,带你进入Grid的世界。
本文涉及的范例代码,可以在这里下载。一个完成好的例子可在这里找到。
XML样本数据 文件名:sheldon.xml
<?xml version="1.0" encoding="UTF-8"?>
<ItemSearchResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2006-06-28">
<OperationRequest>
<HTTPHeaders>
<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>
<Argument Name="Service" Value="AWSECommerceService"></Argument>
<Argument Name="AssociateTag" Value="ws"></Argument>
<Argument Name="SearchIndex" Value="Books"></Argument>
<Argument Name="Author" Value="Sidney Sheldon"></Argument>
<Argument Name="SubscriptionId" Value="1A7XKHR5BYD0WPJVQEG2"></Argument>
<Argument Name="Version" Value="2006-06-28"></Argument>
<Argument Name="Operation" Value="ItemSearch"></Argument>
</Arguments>
<RequestProcessingTime>1.05041599273682</RequestProcessingTime>
</OperationRequest>
<Items>
<Request>
<IsValid>True</IsValid>
<ItemSearchRequest>
<Author>Sidney Sheldon</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Master of the Game</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Are You Afraid of the Dark?</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>If Tomorrow Comes</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>Sidney Sheldon</Author>
<Manufacturer>Warner Vision</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Tell Me Your Dreams</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>The Other Side of Me</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>A Stranger in the Mirror</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>Sidney Sheldon</Author>
<Manufacturer>William Morrow & Company</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>The Sky Is Falling</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Nothing Lasts Forever</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<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']
)
});
{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工作起来的所有因素!
el : 'GridXml',
ds : dataStore,
cm : colModel,
height:350,
width:600
});
grid.render();
dataStore.load();
在body部分加入:
<div id="GridXml"></div>
本文涉及的范例代码,可以在这里下载。一个完成好的例子可在这里找到。
步骤一 定义数据(Data Definition)
首先要让Grid知道XML文档定义了每一行是什么数据。正如所见,我们命名了"item"在下面的XML样本中。XML样本数据 文件名:sheldon.xml
<?xml version="1.0" encoding="UTF-8"?>
<ItemSearchResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2006-06-28">
<OperationRequest>
<HTTPHeaders>
<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>
<Argument Name="Service" Value="AWSECommerceService"></Argument>
<Argument Name="AssociateTag" Value="ws"></Argument>
<Argument Name="SearchIndex" Value="Books"></Argument>
<Argument Name="Author" Value="Sidney Sheldon"></Argument>
<Argument Name="SubscriptionId" Value="1A7XKHR5BYD0WPJVQEG2"></Argument>
<Argument Name="Version" Value="2006-06-28"></Argument>
<Argument Name="Operation" Value="ItemSearch"></Argument>
</Arguments>
<RequestProcessingTime>1.05041599273682</RequestProcessingTime>
</OperationRequest>
<Items>
<Request>
<IsValid>True</IsValid>
<ItemSearchRequest>
<Author>Sidney Sheldon</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Master of the Game</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Are You Afraid of the Dark?</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>If Tomorrow Comes</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>Sidney Sheldon</Author>
<Manufacturer>Warner Vision</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Tell Me Your Dreams</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>The Other Side of Me</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>A Stranger in the Mirror</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>Sidney Sheldon</Author>
<Manufacturer>William Morrow & Company</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>The Sky Is Falling</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Nothing Lasts Forever</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>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<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部分加入:
<div id="GridXml"></div>
相关文章推荐
- 学习EXT第四天--开始使用Grid
- 学习YUI.Ext 第四天--开始使用Grid
- 学习YUI.Ext 第四天--对话框Dialog的使用
- 学习YUI.Ext 第四天--对话框Dialog的使用
- 【ExtJs学习系列】开始使用Grid(四)
- Ext学习日记 grid使用
- UNIX & LINUX学习之开始使用Unix
- Ext.grid.EditorGridPanel使用方法
- Ext gridpanel的使用
- SilverLight学习笔记--Silverlight中GridSplitter控件的使用
- 公司要使用php做一些开发,开始学习php
- Ext学习笔记——grid表格渲染自定义样式
- Ext grid.RowEditor的使用
- Ext.Net 使用总结之GridPanel中的选中行
- Linux运维学习历程-第四天-Linux的使用帮助和快捷键
- 开始cocos2dx学习小记:MacOS下使用cocos2dx创建项目遇到permission denied
- 插件学习之道:ext-jsb-3.0.0.zip共享Ext JS 3.0以上版本在eclipse中使用spket插件设置自动提示的方法
- jQuery框架学习第四天:使用jQuery操作元素的属性与样式
- Ext第一周 史上最强学习笔记---GridPanel(基础篇)
- Ext2.0框架的Grid使用介绍