Treestore empty - is JSON valid?

问题

My code looks like this but there is there is no data in the store / tree.

Is the JSON store-valid? Do I need a root on top of the JSON?

What columns must be defined in the Tree panel?

JSON:

{
   "status" : {
      "status" : 0,
      "msg" : "Ok",
      "protocolversion" : "1.1.json"
   },
   "value" : {
      "name" : "Root",
      "path" : "\/",
      "leaf" : false,
      "children" : [
            {
               "name" : "subfolder1",
               "path" : "\/subfolder1",
               "leaf" : false,
               "children" : []
            },
            {
               "name" : "subfolder2",
               "path" : "\/subfolder2",
               "leaf" : false,
               "children" : []
            },
            {
               "name" : "report1",
               "path" : "\/report1",
               "leaf" : true,
               "children" : []
            }
         ]
   }
}

My ExtJs Code:

Model:

// Model for store
     var oModel = Ext.define('TreeModel', {
        extend: 'Ext.data.Model',
        fields: [
           { name: 'name',         type: 'string' },
           { name: 'path',         type: 'string' }
        ]
     });

Store:

     // Store with local proxy
     var oStore = Ext.create('Ext.data.TreeStore', {
        model: oModel,
        autoLoad: true,
        proxy: {
           type  : 'ajax',
           url   : './data/response.json'
        },
        reader: {
           type  : 'json',
           root  : 'value'
        }
     }); 

TreePanel:

     // View with TreePanel
     var oTreePanel = Ext.create( 'Ext.tree.Panel', {
        store       : oStore,
        useArrows   : true,
        displayField: 'text',
        rootVisible : true,
        multiSelect : true,
        border      : 0,
        columns     : [
           {
              xtype    : 'treecolumn',
              dataIndex: 'name',
              text     : 'Tree',
              flex     : 3
           },
           {
              dataIndex: 'path',
              text     : 'Path',
              flex     : 2
           }
        ]
     } );

回答1:

You need to change value to children in your json and in the root of your reader.

The way to think about is this: The reader's root tells the reader where record data starts. But because tree data is nested (a node can have children) ExtJS looks for another root within each node (then another root within this latter node, and so on recursively).

So if you called your reader's root 'children',it will find the subnodes within a node if it has children node.

You could equally call it 'subs', or 'whatever'; you just need to make sure the same thing is used throughout the hierarchy, include the root of the json data.

回答2:

Here is an example of a tree panel i was able to get functional in MVC structure using 'data' as children:

JSON:

Ext.data.JsonP.callback4({
    "message": "", "data": [
      {
          "descr": "TEST REASON",
          "leaf": false,
          "data": [
            {
                "descr": "TEST REASON",
                "leaf": true,
                "data": null
            }
          ]
      },
      {
          "descr": "Another Type Code",
          "leaf": false,
          "data": []
      },
      {
          "descr": "Quite A Different One I Think",
          "leaf": false,
          "data": [
            {
                "descr": "A Child Of That",
                "leaf": true,
                "data": null
            }
          ]
      }
    ]
})

MODEL:

Ext.define('App.model.treePanel', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'descr', type: 'auto' },
        { name: 'leaf', type: 'auto' }
    ],
    proxy: {
        type: 'jsonp',
        url: 'yourURL',
        //extraParams: {
        //},
        headers: { 'Content-type': 'text/json;  charset=utf-8', 'Accepts': 'text/json' },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        }
    }
});

STORE:

Ext.define('App.store.treePanels', {
    extend: 'Ext.data.TreeStore',
    model: 'App.model.treePanel'
});

VIEW:

Ext.define('App.view.treePanel', {
    extend: 'Ext.tree.Panel',
    xtype:'treePanel',
    title: 'My Items',
    store: 'treePanels',
    rootVisible: false,
    //hideHeaders:true,
    columns: [
        {
            xtype: 'treecolumn',
            dataIndex: 'descr',
            text: 'Current Types and Reasons',
            flex: .5
        }
    ],
    tbar:{
        items: [
            {
                xtype: 'button',
                text: 'Remove Item'
            },
            {
                xtype: 'button',
                text:'Edit Item'
            }
            ]
    }
});

Please note: rootVisible:false was required.

来源：https://stackoverflow.com/questions/11865288/treestore-empty-is-json-valid