PDA

View Full Version : Not able to view simple tree Grid with the local data



sbodanapu
22 Jan 2013, 2:21 AM
Hi..please help me here..

I am trying to display a tree grid with hard coded data..I am not getting any errors and also not able to display any data.but store has all the data which is needed.. Please help me if i am going wrong any where


Ext.onReady(function() {
Ext.create('Ext.tree.Panel', {title: 'Books',
width: 500, height: 300,

collapsible: true,
useArrows: true,
rootVisible: true,
store: store,
multiSelect: true,
singleExpand: true,
columns: [
{
xtype: 'treecolumn',
text: 'Object',
flex: 2,
sortable: true,
dataIndex: 'object'
},
{
text: 'Name',
flex: 1,
dataIndex: 'name',
sortable: true
} ,
{
text: 'Quantity',
flex: 1,
dataIndex: 'quantity',
sortable: true
}
],
renderTo: Ext.getBody()

});
});

var store=Ext.create('Ext.data.TreeStore', {
storeId:'simpsonsStore',
id:'storeName',
autoLoad:true,
fields:[{'type':'int','name':'id','mapping':'id'},{'name':'object','mapping':'object'}, {'name':'name','mapping':'name'},{ 'name':'quantity','mapping':'quantity'}],idProperty: 'id',
data:{'record':[
{ 'id':1,'object':'fruit','name': 'apple','quantity':'40','leaf':true,'parentId':1,'iconCls':'task-folder'},
{ 'id':2,'object':'PC','name': 'HP','quantity':'2',iconCls:'task-folder','expanded':true ,
children: [
{
'id':21,
'object': "sand",
'name': "apple",
'quantity': "50 kg ",
'leaf': true,
'parentId':2
},
{
'id':22,
'object': "mud",
'name': "mango",
'quantity': "100 kg ",
'leaf': true,
'parentId':2
}
]
},
{'id':3, 'object':'pen','name': 'cello','quantity':'30'},
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'record'
}
}
});

Thanks,
Sandeep

mitchellsimoens
24 Jan 2013, 7:46 AM
This is working for me using the root config:


var store = Ext.create('Ext.data.TreeStore', {
fields : [
'id',
'object',
'name',
'quantity'
],
root : {
expanded : true,
children : [
{
id : 1,
object : 'fruit',
name : 'apple',
quantity : '40',
leaf : true,
parentId : 1,
iconCls : 'task-folder'
},
{
id : 2,
object : 'PC',
name : 'HP',
quantity : '2',
iconCls : 'task-folder',
expanded : true,
children : [
{
id : 21,
object : "sand",
name : "apple",
quantity : "50 kg ",
leaf : true,
parentId : 2
},
{
id : 22,
object : "mud",
name : "mango",
quantity : "100 kg ",
leaf : true,
parentId : 2
}
]
},
{
id : 3,
object : 'pen',
name : 'cello',
quantity : '30'
}
]
}
});

Ext.create('Ext.tree.Panel', {
title : 'Books',
width : 500,
height : 300,
collapsible : true,
useArrows : true,
rootVisible : true,
store : store,
multiSelect : true,
singleExpand : true,
columns : [
{
xtype : 'treecolumn',
text : 'Object',
flex : 2,
sortable : true,
dataIndex : 'object'
},
{
text : 'Name',
flex : 1,
dataIndex : 'name',
sortable : true
} ,
{
text : 'Quantity',
flex : 1,
dataIndex : 'quantity',
sortable : true
}
],
renderTo : Ext.getBody()
});