Ext.data.XmlReader解析
2011-04-15 17:20
399 查看
问:对于一个XML文件采用Ext框架,如何通过Ext提供的方法,实现对XML结构的解析?
答:1.Ext采用例如Ext.data.JsonStore这样的store,传递url、root、fields、baseParams等参数,来获取数据 集。并且用服务器端的语言来解析XML返回{root:.......}形式的json。
2.包含XmlReader的普通store。
我们重点来讨论下这个XmlReader到底怎么用。
首先,我们得先解决这个棘手的问题:
怎么去拿到XML中的相应node和node的集合?
后台可以依靠XPath迅速的找到指定节点以及节点集合,Ext靠什么呢?靠的就是Ext.DomQuery。
复杂的我们先不说,先看下面的这个XML:
<conf>
<country name="China">
<cid>China</cid>
<province name="ShanXi">
<pid>ShanXi</pid>
<city>TaiYuan</city>
<city>DaTong</city>
<city>YunCheng</city>
</province>
</country>
<country name="America">
<cid>America</cid>
<province name="Florida">
<pid>aaa</pid>
<city>bbb</city>
<city>ccc</city>
<city>ddd</city>
</province>
</country>
</conf>
那么store该怎么写呢?
1:如果要返回所有country的数据集合:
答:1.Ext采用例如Ext.data.JsonStore这样的store,传递url、root、fields、baseParams等参数,来获取数据 集。并且用服务器端的语言来解析XML返回{root:.......}形式的json。
2.包含XmlReader的普通store。
我们重点来讨论下这个XmlReader到底怎么用。
首先,我们得先解决这个棘手的问题:
怎么去拿到XML中的相应node和node的集合?
后台可以依靠XPath迅速的找到指定节点以及节点集合,Ext靠什么呢?靠的就是Ext.DomQuery。
复杂的我们先不说,先看下面的这个XML:
<conf>
<country name="China">
<cid>China</cid>
<province name="ShanXi">
<pid>ShanXi</pid>
<city>TaiYuan</city>
<city>DaTong</city>
<city>YunCheng</city>
</province>
</country>
<country name="America">
<cid>America</cid>
<province name="Florida">
<pid>aaa</pid>
<city>bbb</city>
<city>ccc</city>
<city>ddd</city>
</province>
</country>
</conf>
那么store该怎么写呢?
1:如果要返回所有country的数据集合:
var store = new Ext.data.Store({ url: 'cpc.xml', reader: new Ext.data.XmlReader({ record: 'country', }, [ {name: 'country', mapping: 'cid'} ]) }); 2:如果要返回China下的省份数据集合: var store = new Ext.data.Store({ url: 'cpc.xml', reader: new Ext.data.XmlReader({ record: 'country[name=China] > province', }, [ {name: 'p', mapping: 'pid'} ]) }); 3:如果要返回某山西省下的所有城市: 可以吧XML改为如下的形式: <conf> <country name="China"> <cid>China</cid> <province name="ShanXi"> <pid>ShanXi</pid> <city> <cityid>TaiYuan</cityid> </city> <city> <cityid>DaTong</cityid> </city> <city> <cityid>YunCheng</cityid> </city> </province> .... .... </conf> store为: var store = new Ext.data.Store({ url: 'cpc.xml', reader: new Ext.data.XmlReader({ record: 'country[name=China] > province[name=ShanXi] > city', }, [ {name: 'c', mapping: 'cityid'} ]) }); 有人会说,我这样都把数据写死了。是的,要想动态的改变store的内容,我们需要借助Ext为我们提供的事件和相 应的方法。现在以combobox和grid联动为例: combobox显示国家名称,联动的grid里显示相应省份列表。 我们可以这样写: var combobox = ..........; var store = new Ext.data.Store({}); var grid = new Ext.grid.GridPanel({ store: store, columns: [ {header: "province", width: 120, dataIndex: 'p'} ], width:540, height:200 }); combobox.on('select', function(combo){ var value = combo.getValue(); store = new Ext.data.Store({ url: 'cpc.xml', reader: new Ext.data.XmlReader({ record: 'country[name=' + value + '] > province', }, [ {name: 'p', mapping: 'pid'} ]); grid.reconfigure(store, grid.getColumnModel()); store.load(); }); 这里我们要注意几点: 1,注意gridpanel的reconfigure方法,它是改换store的好工具,换了后千万别忘了load一下store哦。 2,注意XML外面一定要包一层东西,就是上面的xml中的最外层<conf>,如果没有<conf>,是不可能取到国家数据集 的。 3,注意combo的mode一定要是remote啊。 4,注意例子中的XML很特殊,mapping貌似只能对应一个node的tag,好像不可以对应一个Node的属性,这点有达人知 道的话,回复一下在下。 5,用firebug可以看到,不管你取到的是哪一层数据,response的永远都是xml整个文件,数据量大的时候要慎重使 用XMLReader。(这点是废话,reader是在返回后调用的,只是一个解析器) 6,用XMLReader在我看来,会牺牲一下XML的“个性”,需要复合DOMQuery的检索规范。它显然没有后台的XPATH那么 强势,所以,我们在处理“细活”的时候最好利用后台代码。
相关文章推荐
- Ext.data-DataReader/ArrayReader/JsonReader/XmlReader
- [转载]EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader/XmlReader
- Ext2.0 与服务端XML的交互(扩展Ext.data.XmlReader )
- Ext.data-DataReader/ArrayReader/JsonReader/XmlReader
- Ext2.0 与服务端XML的交互(扩展Ext.data.XmlReader )
- Ext.data.XmlReader读取外部文件时提示拒绝访问
- EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader/XmlReader
- Ext.data-DataReader/ArrayReader/JsonReader/XmlReader
- Ext.data-DataReader/ArrayReader/JsonReader/XmlReader
- EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader/XmlReader javascript
- Ext.data-DataReader/ArrayReader/JsonReader/XmlReader
- Ext.data-DataReader/ArrayReader/JsonReader/XmlReader
- Ext.data-DataReader/ArrayReader/JsonReader/XmlReader
- [转载]EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader/XmlReader javascript
- Ext.data-DataReader/ArrayReader/JsonReader/XmlReader
- EXT核心API详解(十)--DataReader/ArrayReader/JsonReader/XmlReader
- 如何把Ext.data.store里的数据一次性用JSON传给后台(添加了后台解析部分)
- Sencha(Extjs) Ext.data.Store与Reader结合加载多重嵌套数据对象
- 使用JAXP进行SAX解析(XMLReaderFactory、XMLReader 、SAXParserFactory与SAXParser)
- Ext.data专题六: 常用Reader