Should i use Ext.data.TreeStore with the Ext.tree.Panel using REST api

Hi,

I am new to extjs. I have built some grids from rest apis using mvc in extjs 4.2.2. One of the rest api returns the following data:



[

{

"id": "PO-1",

"name": "Planning",

"entity": [

"Item", "Location"

]

},

{

"id": "PO-2",

"name": "Execution",

"entity": [

"Item", "Location", "Allocation"

]

}

....

]



I am trying to create a tree grid with tree store to show the

+ Planning

Item

Location

+ Execution

Item

Location

Allocation



But i am running into issues where the tree does not show up & the rest api call is appending "root" like below:

http://localhost:9000/services/root?_dc=1396368011723&node=root



Is this the right approach or should i use any other view/store combo.



Thanks



-------------------------------------------------------


Store:

------

Ext.define('myApp.store.Service' ,{

extend: 'Ext.data.TreeStore',

model: 'myApp.model.Service',



autoLoad: true,

queryMode: 'local',



requires: [

'myApp.model.Service'

],

proxy: {

type: 'rest',

url: '/services',

reader: {

type: 'json'

},

headers: {

'Accept':'application/json'

}

}

});



Model:

-------

Ext.define('IHub.model.Service', {

extend: 'Ext.data.Model',

fields: [

{ name: 'name',

type: 'string'

},

{

name: 'entity',

type: 'auto'

}

]

});



View:

------



Ext.define('myApp.view.services.List' ,{

extend: 'Ext.tree.Panel',

requires: [

'Ext.data.TreeStore'

],

xtype: 'servicesList',

itemId: 'servicesList',

frame: false,

title: 'Services',

//rootVisible: false,



store: 'Service',



rowEditor: Ext.create('Ext.grid.plugin.RowEditing', {

clicksToEdit: 2

}),



initComponent: function () {

var me = this;

Ext.apply(me, {

columns: [

{

text: 'Service',

xtype: 'treecolumn',

dataIndex: 'name',

filterable: true,

filter:{

type:'string'

},

editor: {

xtype: 'textfield',

allowBlank: false

},

flex: 1

},

{

text: 'Entity',

dataIndex: 'entity',

filterable: true,

filter: {

type:'string'

},

/*

editor: {

xtype: 'textfield',

allowBlank: false

},

*/

flex: 1

},

{

xtype:'actioncolumn',

width:50,

items:

[{

icon: 'images/edit.png', // Use a URL in the icon config

tooltip: 'Edit',

margin: '0 5 5 0',

handler: function(grid, rowIndex, colIndex) {

this.fireEvent('itemclick', me,'serviceEdit', rowIndex, colIndex);

}

},

{

icon: 'images/delete.png',

tooltip: 'Delete',

handler: function(grid, rowIndex, colIndex) {

this.fireEvent('itemclick', me, 'serviceDelete', rowIndex, colIndex);

}

}]

}

],

plugins: [me.rowEditor]

});

me.callParent(arguments);

},



dockedItems: [{

xtype: 'toolbar',

dock: 'bottom',

items: [

{

xtype: 'button',

action: 'addService',

text: 'Add Service'

},

{

xtype: 'button',

action: 'saveService',

text: 'Save'

},

{

xtype: 'tbfill'

}

]

}]

});