Model:
Ext.define('Item', {
extend: 'Ext.data.Model',
fields: [
{name: 'item', type: 'string'},
// {name: 'active', type: 'string'},
{name: 'quantity', type: 'string'}
]
});
Inventory:
var inventoryStore = Ext.create('Ext.data.TreeStore', {
model: 'Item',
proxy: {
type: 'ajax',
url: 'inventory.json'
},
folderSort: true
});
TreePanel:
var treePanel = Ext.create('Ext.tree.Panel', {
title: 'Warehouse Inventory',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: inventoryStore,
multiSelect: true,
singleExpand: true,
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn',
text: 'Item Name',
flex: 2,
sortable: true,
dataIndex: 'item'
},{
text: 'Quantity',
flex: 1,
dataIndex: 'quantity',
sortable: true
}]
});
this.add(treePanel);
this.doLayout();
Issue: I can load the tree panel using data from an external JSON file. However, I want to load it with a decoded JSON object received from the server. Here's an example of the desired structure:
Data Object:
{"text":".",
"children":[
{"item":"Apples","quantity":"15000","expanded":"true","children":[
{"item":"Green Apples","quantity":"7000","expanded":"true","children":[
{"item":"Granny Smith","quantity":"3500","leaf":"true"},
{"item":"Golden Delicious","quantity":"3500","leaf":"true"}
]
},
{"item":"Oranges","quantity":"8000","expanded":"true","children":[
{"item":"Navel Oranges","quantity":"3000","leaf":"true"},
{"item":"Blood Oranges","quantity":"5000","leaf":"true"}
]}]
},
{"item":"Bananas","quantity":"40000","expanded":"true","children":[
{"item":"Cavendish Bananas","quantity":"15000","leaf":"true"},
{"item":"Plantain Bananas","quantity":"25000","leaf":"true"}
]
}]}
However, using this custom data object causes the texts to not display properly in the tree panel.