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: "出版号", width: 120, dataIndex: 'ASIN', sortable: true },
                 { header: "作者", width: 120, dataIndex: 'Author', sortable: true },
                 { header: "书名", width: 180, dataIndex: 'Title', sortable: true },
                 { header: "制作商", width: 115, dataIndex: 'Manufacturer', sortable: false },
                 { header: "产品组", width: 100, dataIndex: 'ProductGroup', sortable: false }],
             renderTo: 'example-grid',
             viewConfig: { columnsText: '显示列', sortAscText: '升序', sortDescText: '降序' },
             width: 640,
             height: 100
         });
 
         store.load();
     });
 
 </script>
 
 <div id="example-grid"></div>
 </body>
 </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: "出版号", width: 120, dataIndex: 'ISBN', sortable: true },
                 { header: "作者", width: 120, dataIndex: 'Author', sortable: true },
                 { header: "书名", width: 180, dataIndex: 'Title', sortable: true },
                 { header: "出版社", width: 115, dataIndex: 'Publisher', sortable: false }],                
             renderTo: 'example-grid',
             viewConfig: { columnsText: '显示列', sortAscText: '升序', sortDescText: '降序' },
             width: 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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Flash在线拍摄用户头象

很多网站在上传用户头象时,除了传统方式上传外,都支持在线摄像头拍照并做简单编辑,完成之后再将图象数据提交到服务端(比如ASP.Net),这几天正好需要这个功能,...

36180
来自专栏二进制文集

爬取北京摩拜单车信息(附分析过程和详细代码)

去年11月份可以在微信中抓取摩拜的小程序,但是现在不行了。当时微信小程序的API很简陋,利用代理可以直接抓取。但是现在试下挂上代理小程序都打不开了。

69960
来自专栏Hongten

pygame系列_箭刺Elephant游戏_源码下载

http://www.pygame.org/docs/tut/chimp/ChimpLineByLine.html

19140
来自专栏菩提树下的杨过

Silverlight Telerik控件学习:GridView双向绑定

做过WinForm数据库开发的人,一定有类似经历:DataGrid绑定后,如果允许行编辑,数据一顿修改后,想批量保存修改后的结果,通常是将DataGrid的所有...

24050
来自专栏智能计算时代

Microservices Ecosystem Transit Map

…we assembled a map of the ecosystem to help guide practitioners, vendors, inves...

41440
来自专栏菩提树下的杨过

Silverlight:利用异步加载Xap实现自定义loading效果

关键点: 1.利用WebClient的DownloadProgressChanged事件更新下载进度 2.下载完成后,分析Xap包的程序集Assembly信息 ...

233100
来自专栏GIS讲堂

Openlayers2中统计图的实现

在前文中,介绍了Arcgis for js和Openlayers3中统计图的实现,在本文,书接上文,介绍在Openlayers2中,统计图的实现。

16330
来自专栏数据结构与算法

BZOJ3262: 陌上花开(cdq分治)

第一行为N,K (1 <= N <= 100,000, 1 <= K <= 200,000 ), 分别表示花的数量和最大属性值。

15720
来自专栏.net core新时代

Spire.Doc组件读取与写入Word

  之前写了一篇开源组件DocX读写word的文章,当时时间比较匆忙选了这个组件,使用过程中还是有些不便,不能提前定义好模版,插入Form表单域进行替换。最近无...

305100
来自专栏PPV课数据科学社区

【学习】七天搞定SAS(一):数据的导入、数据结构

标题有些噱头,不过这里的重点是: speak SAS in 7days。也就是说,知识是现成的,我这里只是要学会如何讲这门语言,而不是如何边学SAS边学模型。顺...

32550

扫码关注云+社区

领取腾讯云代金券