如何在UI中以XML文件为数据源构建树形网格

Question

我想通过解析XML文件来构建树网格。

我看到了extJS XML TREE的例子，但它需要在XML文件中有特定的标签，如id(描述父-子关系)，文本(打印树节点名称)和叶子(指定叶子和非叶子元素)标签。

所以，我必须操作我的xml文件来添加这些标记。但是，有没有办法，我可以达到相同的结果，而不添加额外的标签?

Answer 1

您将需要自己的自定义阅读器。您可以使用自定义阅读器拦截xml响应，并在xml响应进入存储之前对其进行修改。例如，加载以下xml文件将产生一个网格，其中第一个"foo"值为11:

Ext.define('MyReader', {
    extend : 'Ext.data.reader.Xml',
    alias : 'reader.myreader',
    getResponseData: function(response) {
        // Here is the xmlDocument you are going to change
        var xmlDoc = response.responseXML;
        // I change the first foo value to 11.
        var fooValues=xmlDoc.getElementsByTagName('foo');
        fooValues[0].innerHTML=11;
        return this.callParent([response]);
    }
});
Ext.define('Fiddle.view.Foo', {
    extend : 'Ext.grid.Panel',
    xtype  : 'fiddle-foo',
    store: {
        autoLoad: true,
        fields: ['foo'],
        proxy: {
            type: 'ajax',
            url: 'data1.xml',
            reader: {
                type  : 'myreader', // instead of xml
                root  : 'root',
                record: 'fooRecord'
            }
        }    
    },
    columns : [
        {
            text      : 'Foo',
            dataIndex : 'foo',
            flex      : 1
        }
    ]
});
Ext.application({
    name : 'Fiddle',
    launch : function() {
        new Fiddle.view.Foo({
            renderTo : document.body,
            width    : 400,
            height   : 400,
            title    : 'Test'
        });
    }
});

您可以在sencha上查看这个示例xml:

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <fooRecord>
        <foo>1</foo>
    </fooRecord>
    <fooRecord>
        <foo>2</foo>
    </fooRecord>
</root>

我知道你可能无法从XML切换到JSON，因为你根本没有接触到服务器，但JSON更容易解析，如果你能够。您可以在这里找到类似的步骤:https://www.sencha.com/forum/showthread.php?261182-How-to-implement-custom-JSON-reader