ExtJs 5.1 - Ext.tree.panel - 从未知 xml 文件派生的 Json-Object 存储答案

【问题标题】：ExtJs 5.1 - Ext.tree.panel - store from Json-Object derived from unknown xml fileExtJs 5.1 - Ext.tree.panel - 从未知 xml 文件派生的 Json-Object 存储
【发布时间】：2015-06-18 13:54:55
【问题描述】：

在ExtJs 5.1 中，可以从Json-object 创建一个Ext.tree.Panel，因为Json 对象使用命名值 root 和children 来声明嵌套，例如：

<!-- Example 1 -->
<!DOCTYPE html>
<html>
<head>
    <!-- ext imports -->
    <script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
    <link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
    
    <script type ="text/javascript">
        Ext.onReady(function(){
        
            var normal_store =  {
                root:{
                    expanded: true,
                    children: [
                        { text: "detention", leaf: true },
                        { text: "homework", expanded: true, children: [
                            { text: "book report", leaf: true },
                            { text: "algebra", leaf: true}
                        ] },
                        { text: "buy lottery tickets", leaf: true }
                    ]
                }
            };
            console.log(normal_store);
            
            var tree_panel_1 = Ext.create('Ext.tree.Panel', {
                title: 'tree_panel_1',
                store: normal_store,
                rootVisible: true,
                renderTo: Ext.getBody()
            });

        });
    </script>
</head>
<body>
</body>

假设我从 xml 文件 创建了一个 string-variable。然后从 string-variable 创建一个 Json-object。

关于 xml 文件，我唯一知道的是，它是 有效的 xml，但 没有别的 像 tag-名称和属性等。

我可以使用 Jquery 从 xml-file 转到 string-variable。

同样，我可以使用 Xml-To-Json 库从 string-variable 转到 Json-object。

有了这个 Json-Object，我尝试以与 示例 1 类似的方式填充 Ext.tree.Panel：

<!-- Example 2 -->
<!DOCTYPE html>
<html>
<head>
    <!-- ext imports -->
    <script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
    <link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
    
    <!-- jquery and jsonToXml imports -->
    <script type="text/javascript" language="javascript" src="/jquery/jquery-1.11.3.js"></script>
    <script src="/xmlToJson/jquery.xml2json.js" type="text/javascript" language="javascript"></script>
    
    <script type ="text/javascript">
        Ext.onReady(function(){
        
            //i only know that it is valid xml, but nothing about how many tag types, names, attributes etc.
            var xml = $.ajax({type: "GET", url: "path/to/varying.xml", async: false}).responseText;
            var json = $.xml2json(xml);
            console.log(json);
            
            var tree_panel_1 = Ext.create('Ext.tree.Panel', {
                title: 'tree_panel_1',
                store: json,
                rootVisible: true,
                renderTo: Ext.getBody()
            });

        });
    </script>
</head>
<body>
</body>

但是，它不会将 xml 显示为树。我也知道为什么：
如果 Json 对象使用 命名值 root 和 children 来识别正在生成的树的嵌套级别，ExtJs 只能生成这样的树。

所以我的问题是：

问题 1：有谁知道是否可以使用 Ext 功能（如 Json-Reader 等）从 ExtJs 中的一般 Json 对象创建树？ pp.？

如果问题 1 是否定的：我是否必须在 Json 对象上编写迭代逻辑并使用正确的命名值 root 和 children 自己构建 Json 对象以将它们作为存储传递？

【问题讨论】：

标签： javascript jquery json xml extjs

【解决方案1】：

您只需将$.xml2json(xml) 的结果（即所谓的“通用”JSON 对象）转换为Ext.tree.Panel 可以理解的JSON 对象——带有root、children 等的JSON 对象。实际的实现将取决于从 XML 获得的“通用”JSON 的样子。只需对其进行迭代并构建新的 JSON。这可以在自定义阅读器中实现。

【讨论】：

是的，我考虑过使用阅读器，但从 api 文档中我无法推断出如何满足阅读器的需求。你能帮我吗？
另外请记住，关于 xml 的结构一无所知。所有阅读器示例都假定事先知道 xml 的结构。
即使 XML 是不可预测的，您仍然需要规范/形式化如何将其可视化为树。标签名称会简单地成为树节点标题吗？如何处理属性、CDATA 部分等，您希望它们如何在树中显示？