Treestore vacío-¿es JSON válido?

extjs

Question

Mi código se ve así, pero no hay datos en la tienda / árbol.

¿Es la tienda JSON válida? ¿Necesito una root sobre el JSON?

¿Qué columnas deben definirse en el panel Árbol?

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" : []
            }
         ]
   }
}

Mi código ExtJs:

Modelo:

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

Almacenar:

     // 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
           }
        ]
     } );

Answer 1

Necesita cambiar el value para los children en su JSON y en la raíz de su lector.

La manera de pensar es esto: la raíz del lector le dice al lector dónde comienzan los datos del registro. Pero debido a que los datos de árbol están anidados (un nodo puede tener hijos) ExtJS busca otra raíz dentro de cada nodo (luego otra raíz dentro de este último nodo, y así sucesivamente de forma recursiva).

Entonces, si llama a la raíz del lector ''hijos'', encontrará los subnodos dentro de un nodo si tiene el nodo children .

También podría llamarlo ''subs'' o ''lo que sea''; solo necesita asegurarse de que se use lo mismo en toda la jerarquía, incluya la raíz de los datos json.

Answer 2

Aquí hay un ejemplo de un panel de árbol que pude obtener funcional en la estructura MVC usando ''datos'' como niños:

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
            }
          ]
      }
    ]
})

MODELO:

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''
        }
    }
});

ALMACENAR:

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

VER:

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''
            }
            ]
    }
});

Tenga en cuenta: rootVisible:false fue requerido.