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

Question

In ExtJs 5.1 it is possible to create an Ext.tree.Panel from a Json-object given that the Json-object uses the named values root and children to declare the nesting, for example:

<!-- 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>

Lets say that I create a string-variable from a xml-file . Then from the string-variable I create a Json-object .

The only thing I know in advance about the xml-file is, that it is valid xml , but nothing else like tag-names and attributes etc..

I can go from the xml-file to string-variable by using Jquery .

Likewise I can go from string-variable to Json-object by using the Xml-To-Json Library.

Having this Json-Object I have tried to populate an Ext.tree.Panel in a similar fashion as in example 1 :

<!-- 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>

But, it doesn't show the xml as a tree. I also know why:
ExtJs can only generate such a tree if the Json-object uses the named values root and children to identify the nesting level of the tree which is being produced.

So my questions are:

Question 1: Does anyone know wether it is possible to create trees from general Json-objects in ExtJs using Ext-capabilities like Json-Reader etc. pp.?

If Question 1 is negative: Do I have to write the iteration logic over the Json-object and build the Json-object with the proper named values root and children myself to pass them as a store?

Answer 1

All you need is to convert the result of $.xml2json(xml) (ie what you call "general" JSON-object) to JSON object that Ext.tree.Panel can understand — a JSON object with root , children etc. The actual implementation will depend on how your "general" JSON obtained from XML looks like. It will be just a matter of iterating over it and building new JSON. This can be implemented in a custom reader.

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

Question

Question 1: Does anyone know wether it is possible to create trees from general Json-objects in ExtJs using Ext-capabilities like Json-Reader etc. pp.?

If Question 1 is negative: Do I have to write the iteration logic over the Json-object and build the Json-object with the proper named values root and children myself to pass them as a store?

1 answers

solution1
0 2015-06-18 14:25:27

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

Question

Question 1: Does anyone know wether it is possible to create trees from general Json-objects in ExtJs using Ext-capabilities like Json-Reader etc. pp.?

If Question 1 is negative: Do I have to write the iteration logic over the Json-object and build the Json-object with the proper named values root and children myself to pass them as a store?

1 answers

solution1 0 2015-06-18 14:25:27

solution1
0 2015-06-18 14:25:27