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.