EXTJS 3.4 Load JSON data into a TREE dynamically

Question

I need to load JSON data into a Tree or TreePanel. The JSON data does not come from a file or retrived from a URL but is built on the fly.

I cannot find any examples.

Can anyone help?

Answer 1

While I was trying to create a Treegrid afetr searching something in a search filed (need to pass this in the URL) i found some strange behaviour.

How I created here is the logic:

1. Created a Tree class with rootVisible: false and store:mystore
2. My store has no proxy{} as I had to set this dynamically from controller
3. Inside the store autoLoad:false was there
4. Used mystore.load() to load the data into tree

Request was going for 2 times A blank root node in the tree although I have no root node.

I fixed it in the following way... not sure to wat extend this is correct. Any better solution please share

Tree class(View)

            Didn’t define any treestore inside tree view
            rootVisible: false

Inside the controller

search: function(button){

            var searchText = this.getSearchField().value;


            //created a store instance

            var mystore = Ext.data.StoreManager.lookup('MyTreeStore');

            mystore.setProxy({
                                 type: 'ajax',
                                 url: 'app/searchid/'+searchText;
                             });


            var mytree = Ext.create('AM.view.MyTree',{store:mystore});

            Ext.getCmp('tn').add(mytree);

            //DON’T USE store.load() method As we have set rootVisible: false so it will automatically try to load the store or will send the request

}

Store file

            Ext.define('AM.store.BomTreeStore', {

                extend: 'Ext.data.TreeStore',

                model: 'AM.model.BomTree',

                autoLoad: false,

                folderSort: true
            });

Any better solution to this plz share :)

Answer 2

You can do it by progammatically creating a root node. Iterate through your data and keep appending child nodes to your root node. It has been explained quite well here:

ExtJS: How to create static and dynamic trees