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

ExtJs 5.1 - Ext.tree.panel - store from Json-Object derived from unknown xml file

本文关键字：xml 未知 文件 派生 Json-Object 存储 Ext tree panel ExtJs      更新时间：2023-09-26

在 ExtJs 5.1 中，可以从 Json 对象创建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 文件创建了一个字符串变量。然后从字符串变量中创建一个 Json 对象。

关于 xml 文件，我事先唯一知道的是，它是有效的 xml，但没有其他标签名称和属性等。

我可以使用 Jquery 从 xml 文件转到字符串变量。

同样，我可以通过使用 Xml-To-Json 库从字符串变量转到 Json 对象。

有了这个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：有谁知道是否可以使用Json-Reader等Ext-Reader等Ext-capabilities从ExtJs中的一般Json对象创建树？

<小时 />

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

您所需要的只是将$.xml2json(xml)的结果（即您所谓的"通用"JSON 对象）转换为Ext.tree.Panel可以理解的 JSON 对象——具有 root、children 等的 JSON 对象。实际的实现将取决于从XML获得的"通用"JSON的外观。这只是迭代它并构建新 JSON 的问题。这可以在自定义阅读器中实现。

相关文章：