PDA

View Full Version : Data is not loading in Tree Grid



davidmanohar
17 Apr 2014, 1:47 AM
My JS

Ext.onReady(function () {
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
],
proxy: {
type: 'ajax',
url:'treegrid.json',
reader: {
type: 'json',
root : 'children'
}
}

});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Person',
root: {
name: 'People',
expanded: true
}
});
alert("store.."+store.children);
Ext.create('Ext.tree.TreePanel', {
renderTo: Ext.getBody(),
width: 300,
height: 200,
title: 'People',
store: store,
columns: [
{ xtype: 'treecolumn', header: 'Name', dataIndex: 'name', flex: 1 },
//{ xtype: 'treecolumn',header: 'Id', dataIndex: 'id', flex: 1 },{ header: 'Dummy', flex: 1 }

]
});

});



My treegrid .json

{
"children": [
{ "id": 1, "name": "Phil", "leaf": true },
{ "id": 2, "name": "Nico", "expanded": true, "children": [
{ "id": 3, "name": "Mitchell", "leaf": true }
]},
{ "id": 4, "name": "Sue", "loaded": true }
]
}



data is not loading in the grid

:-/:-/:-/

Farish
17 Apr 2014, 3:12 AM
what are you seeing when you load the app?

davidmanohar
17 Apr 2014, 3:16 AM
empty grid with only column name. I can see the root node with name 'Person'

Farish
17 Apr 2014, 3:20 AM
if i use the following as tree data:


var data = {
"name":"Test",
"expanded": true,
"children": [
{ "id": 1, "name": "Phil", "leaf": true },
{ "id": 2, "name": "Nico", "expanded": true, "children": [
{ "id": 3, "name": "Mitchell", "leaf": true }
]},
{ "id": 4, "name": "Sue", "loaded": true }
]
};

store.setRootNode(data);

I can see the data loaded.

davidmanohar
17 Apr 2014, 3:29 AM
but i want the data to be populated from .json file.. could you suggest me any other way

Farish
17 Apr 2014, 3:39 AM
its working fine from JSON file also. I am using the following code:


Ext.onReady(function () {
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
],
proxy: {
type: 'ajax',
url:'test.json',
reader: {
type: 'json',
root : 'children'
}
}
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Person',
root: {
name: 'People',
id: 0,
expanded: true
}
});

Ext.create('Ext.tree.TreePanel', {
renderTo: Ext.getBody(),
width: 300,
height: 200,
title: 'People',
store: store,
columns: [{ xtype: 'treecolumn', header: 'Name', dataIndex: 'name', flex: 1 },{ xtype: 'treecolumn',header: 'Id', dataIndex: 'id', flex: 1 }]
});

});

following are the contents of test.json:

{
"children":
[
{ "id": 1, "name": "Phil", "leaf": true },
{ "id": 2, "name": "Nico", "expanded": true,
"children":
[
{ "id": 3, "name": "Mitchell", "leaf": true }
]
},
{ "id": 4, "name": "Sue", "loaded": true }
]
}48755

davidmanohar
17 Apr 2014, 4:53 AM
for me still data is not population where i should place .json file I am placing it in the same folder of .js, is it correct???

Farish
17 Apr 2014, 4:59 AM
open your app in Chrome and press F12 to launch debugging tools. there you can see the request to fetch data from json file. if the path is not correct, the file wont be found and data wont be loaded. you will then have to adjust your path or place the file at the correct location

davidmanohar
17 Apr 2014, 5:21 AM
Thanks a lot Farish