XML是非常通用的数据传输格式,XmlReader使用的XML格式的数据如代码清单10-4所示。
代码清单 XmlReader使用的XML格式的数据
<?xml version="1.0" encoding="utf-8"?>
<dataset>
<id>1</id>
<totalRecords>2</totalRecords>
<success>true</success>
<record>
<id>1</id>
<name>name1</name>
<descn>descn1</descn>
</record>
<record>
<id>2</id>
<name>name2</name>
<descn>descn2</descn>
</record>
</dataset>
这里一定要用dataset作为XML根元素。再让我们看一下如何对XmlReader进行配置,从而读取上面示例中的XML数据,如下面的代码所示。
var reader = new Ext.data.XmlReader({
totalRecords: 'totalRecords',
success: 'success'
record: 'record',
id: "id"
}, ['id','name','descn']);
XmlReader使用的参数与之前介绍的JsonReader有些不同,我们可以看到这里用到了totalRecords和record两个参数,其中totalRecords用来指定从’totalRecords’标签里获得后台数据总数,record则表示XML中放在record标签里的数据是我们需要显示的结果数据。其他两个参数success和id的含义和JsonReader中对应的参数相似,分别用来判断操是否成功和这次返回的id。因为XML中的标签和reader里需要的名字是相同的,所以简化了配置,将[{name:’id’},{name:’name’},{name:’descn’}]直接写成了[‘id’,’name’,’descn’]。
因为XmlReader不能将JavaScript中的字符串自动解析成XML格式的数据,因此我们需要利用其他方法进行演示。参考localXHR.js中构造XML的方式,我们有了下面的解决方案,如代码清单10-5所示。
代码清单 通过本地字符串构造XML对象
var data = "<?xml version='1.0' encoding='utf-8'?>" +
"<dataset>" +
"<id>1</id>" +
"<totalRecords>2</totalRecords>" +
"<success>true</success>" +
"<record>" +
"<id>1</id>" +
"<name>name1</name>" +
"<descn>descn1</descn>" +
"</record>" +
"<record>" +
"<id>2</id>" +
"<name>name2</name>" +
"<descn>descn2</descn>" +
"</record>" +
"</dataset>";
var xdoc;
if(typeof(DOMParser) == 'undefined'){
xdoc = new ActiveXObject("Microsoft.XMLDOM");
xdoc.async="false";
xdoc.loadXML(data);
}else{
var domParser = new DOMParser();
xdoc = domParser.parseFromString(data, 'application/xml');
domParser = null;
}
var proxy = new Ext.data.MemoryProxy(xdoc);
var reader = new Ext.data.XmlReader({
totalRecords: 'totalRecords',
success: 'success',
record: 'record',
id: "id"
}, ['id','name','descn']);
var ds = new Ext.data.Store({
proxy: proxy,
reader: reader
});