学步园

 问：对于一个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的数据集合：

   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那么
强势，所以，我们在处理“细活”的时候最好利用后台代码。