Extjs: Loading Dynamic Data for Tree

Question

I am new to Extjs, I want to load data dynamically into the tree. The server returns me data, which is not in json format i.e the structure of data is pretty much messed up. What URL should I specify in my code and how do i deal with the format of data. There is no way to differentiate between parent and child when looking at the data returned by the server. I am trying to build a tree based on following code...

Ext.onReady(function() {

    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
        useArrows: true,
        autoScroll: true,
        animate: true,
        enableDD: true,
        containerScroll: true,
        border: false,
        // auto create TreeLoader
        dataUrl:'????????????????????',
        root: {
            nodeType: 'async',
            text: 'ALL',
            draggable: false,
            id: ''
        }
    });

    // render the tree
    tree.render('tree-div');
    tree.getRootNode().expand();
});

ChrisR · Accepted Answer · 2011-03-11 07:36:00Z

1

When passing the dataUrl config option you are telling the Tree Component to use the default TreeLoader which only accepts a JS array (JSON) as output from the server. If you are passing in other data from the server, be it XML, YAML, or other mumbojumbo like you said, you will have to write your own TreeLoader.

Check the documentation on the Ext.tree.Treeloader or the source of TreeLoader for a start, that might get you a long way in understanding what actually needs to be done to write your own Loader that accepts your server output.

answered Mar 11, 2011 at 7:36

ChrisR

14.5k17 gold badges73 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Akhil Latta Over a year ago

Thanks for the tip Chris. I am getting the data from the sever as JS array. The new problem is that how do I make the parent node have a folder icon. Where do i put "cls: folder" in my code.

ChrisR Over a year ago

with parent node do you mean root node? That's done in the root config option you posted above.

Akhil Latta Over a year ago

here is the arrray that i get from my db 'code' [{ id: 1 text: 'Test id X', children: [{ id: 2 text: 'Test id X.1', leaf: true }] },{ id:3 text: 'Test id Y', children: [{ id:4 text: 'Test id Y.1', leaf: true },{ id:5 text: 'Test id Y.2', leaf: true },{ id:6 text: 'Test id Y.3', leaf: true }] Now, how does my UI shows that X is root node and it should show a folder icon,same for Y

Naresh Goud · Accepted Answer · 2014-07-23 12:48:16Z

By adding json object directly to tree.....

Java code:

        for (Object object : objJSONArray) {
            i++;

            JSONObject jsobject = (JSONObject) object;
            if (i == 1) {

                treedata = jsobject;
                System.out.println("  rootnode is:::" + treedata);
            } else {
                String nodeparent = jsobject.getString("NODE_PARENT");
                String parentId = treedata.get("ID").toString();

                if (nodeparent.equals(parentId)) {
                    treedata.put("children", jsobject);
                    System.out.println("treedata  " + treedata);
                } else {
                    Set jsonKeys = treedata.keySet();
                    Iterator itr = jsonKeys.iterator();
                    while (itr.hasNext()) {
                        String keys = itr.next().toString();
                        Object keyObject = treedata.get(keys);
                        if (keyObject instanceof JSONObject) {
                            JSONObject jso = treedata.getJSONObject(keys);
                            String childParentID = jso.getString("ID");
                            if (childParentID.equals(nodeparent)) {
                                jso.put("children", jsobject);
                                treedata.put(keys, jso);
                            }
                        }
                    }
                }
            }
        }

Collectives™ on Stack Overflow

Extjs: Loading Dynamic Data for Tree

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related