ExtJs学习笔记(3)_GridPanel[XML做数据源]

zoukankan html css js c++ java

ExtJs学习笔记(3)_GridPanel[XML做数据源]

这一节，将学习到除了用JSON做GridPanel的数据源外，还可以使用XML

一。静态示例

1.xml文件内容：

<?xml version="1.0" encoding="UTF-8"?>
<Data>
  <Items>
    <TotalResults>203</TotalResults>
    <TotalPages>21</TotalPages>
    <Item>
      <ASIN>0446355453</ASIN>
      <Author>Jimmy.Yang</Author>
      <Manufacturer>Warner Books</Manufacturer>
      <ProductGroup>Book</ProductGroup>
      <Title>Master of the Game</Title>
    </Item>
    <Item>
      <ASIN>0446613657</ASIN>
      <Author>Sidney Sheldon</Author>
      <Manufacturer>Warner Books</Manufacturer>
      <ProductGroup>Book</ProductGroup>
      <Title>Are You Afraid of the Dark?</Title>
    </Item>

  </Items>
</Data>

2.ExtJs调用页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
     <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all.js"></script>
    <title>ExtJs_Grid_Xml</title>
</head>
<body>

<script type="text/javascript">

    Ext.onReady(function() {

        var store = new Ext.data.Store({
            url: 'GridData.xml',
            reader: new Ext.data.XmlReader(
                { record: 'Item' },
                ["ASIN","Author", "Manufacturer", "ProductGroup", "Title"])
        });


        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                { id: "ASIN", header: "出版号",  120, dataIndex: 'ASIN', sortable: true },
                { header: "作者",  120, dataIndex: 'Author', sortable: true },
                { header: "书名",  180, dataIndex: 'Title', sortable: true },
                { header: "制作商",  115, dataIndex: 'Manufacturer', sortable: false },
                { header: "产品组",  100, dataIndex: 'ProductGroup', sortable: false }],
            renderTo: 'example-grid',
            viewConfig: { columnsText: '显示列', sortAscText: '升序', sortDescText: '降序' },
             640,
            height: 100
        });

        store.load();
    });

</script>

<div id="example-grid"></div>
</body>
</html>

运行效果如下图：

转载请注明来自"菩提树下的杨过" http://www.cnblogs.com/yjmyzz/archive/2008/08/28/1278949.html

二。结合WCF动态读取

1.WCF端关键代码
定义一个可序列化的类(当然也可以是Linq to Sql中自动生成的类，不过要手动加DataContract和DataMember标记，以满足WCF的数据契约要求)

[DataContract]
    public class Book
    {
        [DataMember]
        public string ISBN;

        [DataMember]
        public string Title;

        [DataMember]
        public string Author;

        [DataMember]
        public string Publisher;
    }

返回Xml数据的方法，注意格式要设置成WebMessageFormat.Xml

[OperationContract]
        [WebInvoke(ResponseFormat = WebMessageFormat.Xml, Method = "GET", UriTemplate = "GetXmlData")]
        public Book[] GetXmlData()
        {
            List<Book> _List = new List<Book>();
            _List.Add(new Book() { ISBN = "00001", Title = "c#深入编程(第四版)", Author = "Alien", Publisher = "北京出版社" });
            _List.Add(new Book() { ISBN = "00002", Title = "ExtJs完全教程", Author = "Mike", Publisher = "上海出版社" });
            return _List.ToArray();
        }

2.前端ExtJs代码

<script type="text/javascript">

    Ext.onReady(function() {

        var store = new Ext.data.Store({
        url: 'MyService.svc/GetXmlData',
            reader: new Ext.data.XmlReader(
                { record: 'Book' },
                ["Author", "ISBN", "Publisher", "Title"])
        });


        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                { id: "ISBN", header: "出版号",  120, dataIndex: 'ISBN', sortable: true },
                { header: "作者",  120, dataIndex: 'Author', sortable: true },
                { header: "书名",  180, dataIndex: 'Title', sortable: true },
                { header: "出版社",  115, dataIndex: 'Publisher', sortable: false }],
            renderTo: 'example-grid',
            viewConfig: { columnsText: '显示列', sortAscText: '升序', sortDescText: '降序' },
             640,
            height: 100
        });

        store.load();
    });

</script>

除了把url由xxx.xml，改成了"MySerivce.svc/GetXmlData"其它的几乎没变化，运行之后，用Web Development Helper插件监测到GetXmLData返回的内容为:

<ArrayOfBook xmlns="http://schemas.datacontract.org/2004/07/Ajax_WCF" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
<Book>
<Author>Alien</Author>
<ISBN>00001</ISBN>
<Publisher>北京出版社</Publisher>
<Title>c#深入编程(第四版)</Title>
</Book>
<Book>
<Author>Mike</Author>
<ISBN>00002</ISBN>
<Publisher>上海出版社</Publisher>
<Title>ExtJs完全教程</Title>
</Book>
</ArrayOfBook>

作者：菩提树下的杨过
出处：http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

查看全文

相关阅读:
leetcode 437. 路径总和 III
leetcode 113. 路径总和 II
题解【CF387B】George and Round
题解【CF489B】 BerSU Ball
题解【2.23考试T3】val
题解【2.23考试T1】div
题解【洛谷P4290】 [HAOI2008]玩具取名
 题解【洛谷P1035】[NOIP2002]级数求和
 题解【洛谷P1046】[NOIP2005] 陶陶摘苹果
 题解【洛谷P1618】三连击（升级版）

原文地址：https://www.cnblogs.com/yjmyzz/p/1278949.html