ext-ui.com

XML网格(XML Grid)

Posted 周三, 04/30/2008 - 09:46 by admin


前一节跟大家介绍了 基本数组网格(Basic Array Grid)以javascript数组的方式绑定的，在实际的开发应用中，很多情况数据源是xml格式的，那么ExtJs框架有没有提供xml格式的绑定的？答案是： 有

演示(demo)地址在文章最后.

效果图如下:

用到的有三个文件sheldon.xml、xml-grid.html和xml-grid.js。如果没有特别声明，.html跟.js文件名是一样的。

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>

xml-grid.html 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>XML Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>
    
<script type="text/javascript" src="xml-grid.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<!-- EXAMPLES -->
<script type="text/javascript" src="../examples.js"></script>
<h1>XML Grid Example</h1>
<p>This example shows how to load a grid with XML data.</p>

<p>This grid also uses autoHeight and autoWidth to dynamically 
size to fit it's data and columns.</p>

<p>Note that the js is not minified so it is readable. 
See <a href="xml-grid.js">xml-grid.js</a>.</p>

<p>The data in the grid is loaded from <a href="sheldon.xml">sheldon.xml</a>
, which is directly from an Amazon.com search.</p>

<!-- a place holder for the grid. requires the unique id to be passed in the javascript function,
 and width and height ! -->
<div id="example-grid"></div>

</body>
</html>

xml-grid.js

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing＠extjs.com
 * 
 * extjs.com/license
 */

Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: 'sheldon.xml',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'ASIN',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Author', mapping: 'ItemAttributes > Author'},
               'Title', 'Manufacturer', 'ProductGroup'
           ])
    });

    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
            {header: "Title", width: 180, dataIndex: 'Title', sortable: true},
            {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
            {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
        ],
        renderTo:'example-grid',
        width:540,
        height:200
    });

    store.load();
});

演示地址:http://extjs.org.cn/extjs/examples/grid/xml-grid.html

  • 要发表评论，请先登录

评论

我用的EXTJS2.2的版本，按照上面的例子写的，怎么还是没数据显示呢？

by 游客 - 05/23/2009 - 20:17


问题如题，测试结果只显示了表格的表头，没有显示数据。请问这是什么原因呢？
代码如下：
Ext.onReady(function(){
var reader1 = new Ext.data.XmlReader({ record: 'Item', id: 'ASIN' },
[ {name:'Author', mapping: 'ItemAttributes>Author'},
'Title', 'Manufacturer', 'ProductGroup']
) ;

/*定义数据源*/
var dataStore = new Ext.data.Store({
url: 'NewFile.xml',
// data:data1,
reader: reader1,
autoLoad:true
});
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'}
]);

var grid = new Ext.grid.GridPanel({ ds: dataStore, cm: colModel});
grid.render(document.body);
dataStore.load();

});

  • 要发表评论，请先登录

xml拒绝访问

by 游客 - 05/05/2009 - 15:31

在本机打开\ext-2.0.2\examples\grid\xml-grid.html。 提示运行时错误，拒绝访问。哪位达人知道原因？？

  • 要发表评论，请先登录

需要服务器环境支持

by admin - 05/07/2009 - 09:31

由于安装原因本地访问html是会报错的.
使用 http://xxx/xxx/xml-grid.html

  • 要发表评论，请先登录

看了半天程序都不懂

by 游客 - 07/05/2008 - 13:58

看了半天程序都不懂，原来这个xml和程序差了十万八千里。请楼主更正，要记得仔细检查啊。
真正的xml地址在 http://extjs.org.cn/extjs/examples/grid/sheldon.xml

  • 要发表评论，请先登录

已更改xml文件

by admin - 07/06/2008 - 10:54

已更改xml文件,非常感谢,:)!

  • 要发表评论，请先登录