ExtJs学习笔记(3)_GridPanel[XML做数据源]
这一节，将学习到除了用JSON做GridPanel的数据源外，还可以使用XML
一。静态示例
1.xml文件内容：
<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调用页面
<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>
运行效果如下图：
转载请注明来自"菩提树下的杨过" http://www.cnblogs.com/yjmyzz/archive/2008/08/28/1278949.html
二。结合WCF动态读取
1.WCF端关键代码
定义一个可序列化的类(当然也可以是Linq to Sql中自动生成的类，不过要手动加DataContract和DataMember标记，以满足WCF的数据契约要求)
public class Book
{
[DataMember]
public string ISBN;
[DataMember]
public string Title;
[DataMember]
public string Author;
[DataMember]
public string Publisher;
}
返回Xml数据的方法，注意格式要设置成WebMessageFormat.Xml
[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代码
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>
转载于:https://www.cnblogs.com/yjmyzz/archive/2008/08/28/1278949.html
ExtJs学习笔记(3)_GridPanel[XML做数据源]相关推荐
- Android学习笔记之AndroidManifest.xml文件解析（摘自皮狼的博客）
Android学习笔记之AndroidManifest.xml文件解析 一.关于AndroidManifest.xml AndroidManifest.xml 是每个android程序中必须的文件.它 ...
- [学习笔记] Cordova+AmazeUI+React 做个通讯录 - 单页应用 (With Router)
[学习笔记] Cordova+AmazeUI+React 做个通讯录 系列文章 目录 准备 联系人列表(1) 联系人列表(2) 联系人详情 单页应用 (With Router) 使用 SQLite 传 ...
- [学习笔记] Cordova+AmazeUI+React 做个通讯录 - 使用 SQLite
[学习笔记] Cordova+AmazeUI+React 做个通讯录 系列文章 目录 准备 联系人列表(1) 联系人列表(2) 联系人详情 单页应用 (With Router) 使用 SQLite 传 ...
- ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)
这一节,我们将看到ExtJs功能强大的可编辑网格控件,几乎与VS.Net的GridView功能一样了,但是ExtJs的可是纯JS的UI 一.静态示例(改自ExtJs的官方示例) a.因为我们是采用xm ...
- extlink.php,ExtJs 学习笔记基础篇 Ext组件的使用_extjs
昨天刚接触到Extjs,简单写了篇学习笔记,今天继续. 天介绍一下Ext中组件举几个简单的例子做说明.注意:文章内容有些摘自本人学习过程中看到的资料. Ext2.0对框架进行了非常大的重构,其中最重要 ...
- 影像组学视频学习笔记(14)-特征权重做图及美化、Li‘s have a solution and plan.
本笔记来源于B站Up主: 有Li 的影像组学系列教学视频 本节(14)主要介绍: 特征权重做图及美化 import matplotlib.pyplot as plt %matplotlib inlin ...
- Javascript学习笔记8——用JSON做原型
在Javascript学习笔记5--类和对象中,我简单地提到了利用JSON去构造一个对象.代码如下: <script type="text/javascript">va ...
- 阿里云HaaS100物联网开发板学习笔记（六）做个智能灯---一个完整的开发例子
摘要:本篇文章将前期几个专题综合起来,基于阿里云HaaS100的新固件设计制作一个智能灯.这个智能灯由云平台.手机APP端和设备端组成,基本上涵盖了一个物联网小项目所需的主要步骤. 目录 1.在阿里云 ...
- SpringCloud学习笔记028---在SpringBoot中整合多数据源_实战项目
JAVA技术交流QQ群:170933152 1.这里使用MySql和PostGreSql做为数据源 2.可以同时在xml中配置和在配置类中配置, 不过这里用配置类配置,xml那种没有用到,稍后, ...
最新文章
- ITAA在线试学用户使用说明
- LeetCode 379. 电话目录管理系统（哈希set）
- 锦州哪家计算机学校好,锦州十大排名中专
- 如何使用 Buildah 构建容器镜像
- 模电Aus,Uo/Us,童诗白例2.3.3。
- Jenkins使用教程
- java phpwind_GitHub - phpwind/windframework: Open-source PHP framework
- 条码打印工具-Bartender的使用
- MATLBA官方给出的2D Allen-Cahn Matlab代码分析
- 如何在线修改图片分辨率？怎么调整300dpi分辨率？
- mysql execute stmt_[转载]MySql 数据库--stmt语句
- 中国眼镜市场销售前景分析与运营效益研究报告2021-2026年
- 搜狗输入法按shift键切换到英文时会清空已输入字符的问题
- 华为主题引擎怎么下载_华为搜索引擎app
- 模型预测控制（MPC）+逻辑控制（相平面分区控制）--matlab例程介绍
- 3d打印,机器人,计算机,3D打印的机器人将教孩子计算机编码！
- 风暴孵化浅谈：何为值得手游代理的“好”游戏
- 前端三剑客之HTML
- 重磅：保姆级Java技术图谱发布！够学到元宵节了，赶紧收藏！
- 【虹科】“天问一号”着落的火星，你也想亲眼见证吗？——天体物理观测、短波红外技术与SIRIS相机