Load treegrid data dyanamically from a json property file in extjs

Question

Treegrid is not getting rendered properly. Here is the code:

treeGrid.js :

Ext.define('App.view.DBStatusGrid', {
extend      : 'Ext.container.Container',
xtype       : 'app-DB-grid',
layout      : 'vbox',
items       : [
    {
        xtype   : 'container',
        cls     : 'boxTitle',
        html    : 'DB Details'
    },
    {
     xtype : 'treepanel',
     singleExpand: true,
     useArrows:true,
     rootVisible:false,
     columns: [
               {text: 'Server Status',  dataIndex: 'serverStatus' , width: 80,},
               { xtype: 'treecolumn',text: 'Server Name',  dataIndex: 'serverName' , width: 140},
               { text: 'Instance Status', align:'center', dataIndex: 'instanceStatus',width: 80,},
               {text: 'Instance Name', align:'center', dataIndex: 'instanceName',width: 140}
      ]
    }
  ]
});

property.json :

 "data":[ 
         {
          "serverStatus": "active",
          "serverName":"rg0C1",
          "iconCls":"task-folder",
          "expanded":false,
          "data": [
                        {
                         "instanceStatus": "active",
                         "instanceName":"OA1",
                         "leaf":true,
                         "iconCls":"no-icon"
                         }
                       ]
         }
      ]

Creating store

Ext.define('App.view.InnerContainerView', {
extend      : 'Ext.container.Container',
xtype       : 'app-inner-ContainerView',
config  : {
    component   : 'NONE',
    parentView  : ''
},
initComponent   : function() {
    var parentView = this.getParentView();
    this.items = [
        {
          xtype : 'container',
          layout: 'card',
          items : [
                   {
                      xtype: 'app-DB-grid',
                      parentView: parentView,
                      listeners :{
                      render : function(){
                      var store = Ext.create('Ext.data.TreeStore',
                      {
                        model: 'App.model.treeModel',
                        autoLoad: true,
                        proxy: {
                                 type: 'ajax',
                                 url:'app/data/property.json',
                                 reader: {
                                       type: 'json',
                                       root : 'data'
                                   }
                          }, 
                          root :{
                              expanded :true
                          }
                        });
                         this.down('treepanel').setRootNode(store.getRootNode()); // I am getting my treegrid,and setting the rootnode.
                  }
                 ]
       }
      ]
    this.callParent();
   });

My Problem :

From the json property file,only serverName is getting displayed in the treegrid.When I try to expand the serverName,it is not getting expanded.Please help me resolve this issue.Please point me to the correct direction if I am going wrong somewhere.Any help would be appreciated.Thanks.

Answer 1

What about having the store available before the component is created?

Ext.widget({
    renderTo: Ext.getBody(),

    xtype : 'treepanel',
    singleExpand: true,
    useArrows:true,
    rootVisible:false,
    columns: [
        {text: 'Server Status',  dataIndex: 'serverStatus' , width: 80,},
        {xtype: 'treecolumn',text: 'Server Name',  dataIndex: 'serverName' , width: 140},
        {text: 'Instance Status', align:'center', dataIndex: 'instanceStatus',width: 80,},
        {text: 'Instance Name', align:'center', dataIndex: 'instanceName',width: 140}
    ]

    ,store: Ext.create('Ext.data.TreeStore', {
        model: 'App.model.treeModel',
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url:'property.json',
            reader: {
                type: 'json',
                root : 'data'
            }
        },
        root :{
            expanded :true
        }
    })
});

I assumed from the presence of the xtype that you didn't define a class for that component, but that could also be done:

Ext.define('My.TreePanel', {
    extend: 'Ext.tree.Panel',

    singleExpand: true,
    useArrows:true,
    rootVisible:false,
    columns: [
        {text: 'Server Status',  dataIndex: 'serverStatus' , width: 80,},
        {xtype: 'treecolumn',text: 'Server Name',  dataIndex: 'serverName' , width: 140},
        {text: 'Instance Status', align:'center', dataIndex: 'instanceStatus',width: 80,},
        {text: 'Instance Name', align:'center', dataIndex: 'instanceName',width: 140}
    ]

    // Providing only configuration (as opposed to a store instance) in order for
    // each tree to have its own store instance
    ,store: {
        model: 'App.model.treeModel',
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url:'property.json',
            reader: {
                type: 'json',
                root : 'data'
            }
        },
        root :{
            expanded :true
        }
    }
});

Ext.create('My.TreePanel', {
    renderTo: Ext.getBody()
});

Or this way, that would allow us to be more dynamic with the store creation:

Ext.define('My.TreePanel', {
    extend: 'Ext.tree.Panel',

    singleExpand: true,
    useArrows:true,
    rootVisible:false,
    columns: [
        {text: 'Server Status',  dataIndex: 'serverStatus' , width: 80,},
        {xtype: 'treecolumn',text: 'Server Name',  dataIndex: 'serverName' , width: 140},
        {text: 'Instance Status', align:'center', dataIndex: 'instanceStatus',width: 80,},
        {text: 'Instance Name', align:'center', dataIndex: 'instanceName',width: 140}
    ]

    ,initComponent: function() {

        // Creating store instance myself at creation time
        this.store = Ext.create('Ext.data.TreeStore', {
            model: 'App.model.treeModel',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url:'property.json',
                reader: {
                    type: 'json',
                    root : 'data'
                }
            },
            root :{
                expanded :true
            }
        });

        // Don't forget to call the superclass method!
        this.callParent(arguments);
    }

});

Ext.create('My.TreePanel', {
    renderTo: Ext.getBody()
});