<!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>
<title>无标题页</title>
<script src="ExtJs/ext-base.js" type="text/javascript"></script>
<script src="ExtJs/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">...
<!--
//数据源为数组的ArrayReader
function ArrayData()
...{
//定义数组
var arr=[ [ 'Bill', 'Gardener',1],['Ben', 'Horticulturalist',2]];
var reader = new Ext.data.ArrayReader(
//以第一个元素做为recordid,这个是必须得要的
...{id: 2},
//定义数组到record的映射关系
//name:属性名称
//mapping:映射到数据源的序列，即索引
[
...{name: 'name', mapping: 0},//对应字符:Bill
...{name: 'metier', mapping: 1},//对应字符:Gardener
...{name: 'id',mapping:2}//对应数字:1,如果第一个元素定义，则可以省略
]
);
//生成元数据
var data=reader.readRecords(arr);
var str="";
for(var i=0;i<data.records.length;i++)
...{
//标识列 保存的数组被转换为对象 Json数据
str = str.concat(
" totalRecords:"+data.totalRecords +//数据总条数
" ID:"+data.records[i].id +
" Data: .id="+data.records[i].data.id +
" Data: .name="+data.records[i].data.name +
" Data: .metier="+data.records[i].data.metier +
" json:"+data.records[i].json+" ");
}
alert(str);
}
function JsonData()
...{
var json=...{ 'results': 2, //设定此对象的总个数,与rows数组长度一致，需要手动设定
'rows': [
...{ id: 1, name: 'Bill', metier: 'Gardener' },
...{ id: 2, name: 'Ben', metier: 'Horticulturalist' }
]
};
var reader=new Ext.data.JsonReader(
...{
totalProperty: "results",//totalRecords属性由json.results得到(省略此参数也能得到总条数)
root: "rows", //构造元数据的数组由json.rows得到
id: "id" //id由json.id得到
},[
...{name:'id',mapping:'id'},
...{name: 'name', mapping: 'name'},
...{name: 'metier'} //如果name与mapping同名,可以省略mapping
]
)
var data=reader.readRecords(json);
var str="";
for(var i=0;i<data.records.length;i++)
...{
//标识列 保存的数组被转换为对象 Json数据
str = str.concat(
" totalRecords:"+data.totalRecords +//数据总条数
" ID:"+data.records[i].id +
" Data: .id="+data.records[i].data.id +
" Data: .name="+data.records[i].data.name +
" Data: .metier="+data.records[i].data.metier +
" json:"+data.records[i].json+" ");
}
alert(str);
}
function XmlData()
...{
var str=["<?xml version="1.0" encoding="utf-8" ?>",
"<dataset>",
"<results>2</results>",
"<row>",
"<id>1</id>",
"<name>Bill</name>",
"<occupation>Gardener</occupation>",
"</row>",
"<row>",
"<id>2</id>",
"<name>Ben</name>",
"<occupation>Horticulturalist</occupation>",
"</row>",
"</dataset>"].join("");
//生成xmldocument对象
var xmlDocument;
if(Ext.isIE)...{
xmlDocument = new ActiveXObject("Msxml2.FreeThreadedDOMDocument")
xmlDocument.async=false;
xmlDocument.resolveExternals = false;
xmlDocument.loadXML(str)
}
else...{
xmlDocument = (new DOMParser()).parseFromString(str, "text/xml");
}
//然后开始...和其它两个reader一样的用法,只是这儿换了一种写法,recordtype也可以是一个record对象
//record对象的属性映射
var record = Ext.data.Record.create([
...{name: 'name', mapping: 'name'}, // "mapping" property not needed if it's the same as "name"
...{name: 'metier',mapping:'occupation'}, // This field will use "occupation" as the mapping.
...{name:'id'}
])
var reader = new Ext.data.XmlReader(...{
totalRecords: "results",
record: "row", //row是节点选择器
id: "id"
}, record);
var data=reader.readRecords(xmlDocument);
var outstr="";
for(var i=0;i<data.records.length;i++)
...{
//标识列 保存的数组被转换为对象 Json数据
outstr = outstr.concat(
" totalRecords:"+data.totalRecords +//数据总条数
" ID:"+data.records[i].id +
" Data: .id="+data.records[i].data.id +
" Data: .name="+data.records[i].data.name +
" Data: .metier="+data.records[i].data.metier +
" json:"+data.records[i].json+" ");
}
alert(outstr);
}
//-->
</script>
</head>
<body>
<input id="Button1" onclick="ArrayData()" type="button" value="数组源数据" />
<input id="Button2" onclick="JsonData()" type="button" value="Json源数据" />
<input id="Button3" onclick="XmlData()" type="button" value="XML源数据" />
</body>
</html>
分享到：
相关推荐
这部分讲解了数据连接（Connection/Ajax）、数据代理（DataProxy，如HttpProxy、MemoryProxy、ScriptTagProxy）、数据读取器（DataReader，如ArrayReader、JsonReader、XmlReader）以及数据存储（Store）的使用。...
6. **Proxy**：Proxy 是EXTJS 中用于与服务器通信的抽象层，它处理数据的读取、写入和销毁操作。常见的Proxy 类型有： - **MemoryProxy**：在内存中存储数据，不涉及服务器交互，适用于小型或临时数据。 - **...
13.6 数据读取器 13.6.1 Ext.data.DataReader 13.6.2 Ext.data.ArrayReader 13.6.3 Ext.data.JsonReader 13.6.4 Ext.data.XmlReader 13.7 Ext.ux.DWR 13.7.1 Ext.data.DwrProxy 13.7.2 Ext.data....
**DataReader, ArrayReader, JsonReader, XmlReader 类**：数据读取器，用于解析不同格式的服务器响应数据。 29-34. **Store, GroupingStore, SimpleStore, Tree, Node 类**：数据存储类，管理数据集，支持分组、...
13.6 数据读取器 13.6.1 Ext.data.DataReader 13.6.2 Ext.data.ArrayReader 13.6.3 Ext.data.JsonReader 13.6.4 Ext.data.XmlReader 13.7 Ext.ux.DWR 13.7.1 Ext.data.DwrProxy 13.7.2 Ext.data....
- **数据读取器**: `DataReader`、`ArrayReader`、`JsonReader`和`XmlReader`用于解析不同格式的数据源。 - **数据存储**: `Store`用于管理数据集，而`GroupingStore`、`JsonStore`和`SimpleStore`提供了更高级的...
- `new Ext.data.DataReader(readerConfig, recordType)`：创建一个新的数据读取器实例。 - `Ext.data.DataReader.read(response, options)`：读取数据。 #### 三十二、Ext.data.ArrayReader类（第26页） - **...
- `Ext.data.ArrayReader.read(response)`: 读取数组数据。 #### 33. Ext.data.JsonReader 类 (P.26) - **概述**：读取JSON格式的数据。 - **常用方法**: - `Ext.data.JsonReader.read(response)`: 读取JSON数据...
33、Ext.data.JsonReader类 …………… 26 34、Ext.data.XmlReader类 …………… 27 35、Ext.data.Store类 …………………… 28 36、Ext.data.GroupingStore类 ………… 32 37、Ext.data.SimpleStore类 ………… 34 ...
基于extjs的.NET3.5控件Coolite 1.0.0.34580 (Preview预览版）， *************************************************** * Version 1.0.0 升级日志 * *************************************************** 1. ...
3.5.2. TreeLoader外传 之 读取本地json 3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2. 右键菜单并非单纯的事件 3.7.3. 默认图标好单调，改一下撒 3.7.4. 偷偷告诉你咋从...
简单易行ArrayReader 8.4.2.2. 灵活轻便JsonReader 8.4.2.3. 久负盛名XmlReader 8.4.3. 相信你知道怎么做加法 8.5. 跟我用json，每天五分钟 8.5.1. Hello 老爸。 8.5.2. 老妈等等，孩子先上场。 8.5.3. 老妈来了，...