PDA

View Full Version : Treepanel shows parent nodes instead of child nodes



ppatel2
17 Jun 2013, 7:35 AM
Hi,

I am having a problem with the Tree panel data. I am trying to get the data in a single call through Ajax request with all the child nodes together. But when I am trying to expand the parent node it again tries to fetch the data through the same Ajax request and it duplicates the child nodes. I never see the child node data. Can anyone please explain what am I missing here ?
44407


Ext.define('TreePanel', { extend: 'Ext.tree.Panel',
alias: 'widget.TreePanel',
store: customReportsStore,
scroll: 'false',
rootVisible: false,
useArrows: true,
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Category',
flex: 2,
sortable: true,
dataIndex: 'text'
},{
text: 'Description',
flex: 1,
dataIndex: 'description',
sortable: true
},{
text: 'Delete',
flex: 1,
dataIndex: 'delete',
sortable: true
}
]
});


var customReportsStore = new Ext.data.TreeStore( { model: 'CustomReport',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'Ajax Url',
reader: {
type: 'json',
root: 'Results'
}
}
});


Ext.define('CustomReport',{ extend: 'Ext.data.Model',
fields: [
'text','description','delete'
]
});


var tabs2 = Ext.widget('tabpanel', { activeTab: 0,
renderTo: 'mainMenuDiv',
scroll: false,
margin: '5',
plain: true,
defaults :{
autoScroll: false
},
items: [{
xtype: 'panel',
title: 'Reports',
itemId: 'reportsTab',
border: false,
items:[{
html: "<h2>Custom Reports</h2><br/>",
border: false
},{
xtype: 'TreePanel',
width: 1300,
margin: '10'
}],
listeners: {
activate: function(tab) {
{
customReportsStore.load();
}
}
}
}]
});



{"Results":[ {
"text":"CSFs","description":"","delete":"",
"children":[
{
"text":"CSF 1","description":"","delete":"true","leaf":true
},{
"text":"CSF 2","description":"","delete":"true","leaf":true
},{
"text":"CSF 3","description":"","delete":"false","leaf":true
}]
},
{
"text":"Individual","description":"","delete":"",
"children":[
{
"text":"Individual 1","description":"","delete":"true","leaf":true
},{
"text":"Individual 2","description":"","delete":"true","leaf":true
},{
"text":"Individual 3","description":"","delete":"true","leaf":true
}]
},
{
"text":"Sub-Team","description":"","delete":"",
"children":[
{
"text":"Sub-Team 1","description":"","delete":"true","leaf":true
},{
"text":"Sub-Team 2","description":"","delete":"true","leaf":true
},{
"text":"Sub-Team 3","description":"","delete":"true","leaf":true
}]
}]
}

slemmon
18 Jun 2013, 10:55 PM
Are you able to restructure the data output? The following will work (differences in red):



Ext.define('CustomReport', {
extend: 'Ext.data.Model',
fields: [
'text', 'description', 'delete'
]
});


var customReportsStore = new Ext.data.TreeStore({
model: 'CustomReport',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'data/json.json',
reader: {
type: 'json',
//root: 'Results'
}
}
});


Ext.define('TreePanel', {
extend: 'Ext.tree.Panel',
alias: 'widget.TreePanel',
store: customReportsStore,
scroll: 'false',
rootVisible: false,
useArrows: true,
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Category',
flex: 2,
sortable: true,
dataIndex: 'text'
}, {
text: 'Description',
flex: 1,
dataIndex: 'description',
sortable: true
}, {
text: 'Delete',
flex: 1,
dataIndex: 'delete',
sortable: true
}]
});


Ext.widget('viewport', {
layout: 'fit',
items: [Ext.create('TreePanel')]
});


and the data:


{
"expanded": true,

"children": [{
//"Results": [{ // swap this with "children": [{ above
"text": "CSFs",
"description": "",
"delete": "",
"children": [{
"text": "CSF 1",
"description": "",
"delete": "true",
"leaf": true
}, {
"text": "CSF 2",
"description": "",
"delete": "true",
"leaf": true
}, {
"text": "CSF 3",
"description": "",
"delete": "false",
"leaf": true
}]
}, {
"text": "Individual",
"description": "",
"delete": "",
"children": [{
"text": "Individual 1",
"description": "",
"delete": "true",
"leaf": true
}, {
"text": "Individual 2",
"description": "",
"delete": "true",
"leaf": true
}, {
"text": "Individual 3",
"description": "",
"delete": "true",
"leaf": true
}]
}, {
"text": "Sub-Team",
"description": "",
"delete": "",
"children": [{
"text": "Sub-Team 1",
"description": "",
"delete": "true",
"leaf": true
}, {
"text": "Sub-Team 2",
"description": "",
"delete": "true",
"leaf": true
}, {
"text": "Sub-Team 3",
"description": "",
"delete": "true",
"leaf": true
}]
}]
}

ppatel2
19 Jun 2013, 4:41 AM
Thanks Slemmon. It worked like a charm.