PDA

View Full Version : Unable to exapnd a tree which has columns and data coming in from JSON file



shaliniddn
22 Aug 2014, 6:11 PM
Hi,


I have a requirement to create a tree grid which has unknown number of columns and data which gets rendered on click on a button. I have following code for the same.


//Model
Ext.define('SM.model.DynamicTreeModel', {
extend: 'Ext.data.Model'
});


//Store
Ext.define('SM.store.DynamicTreeStore',{
extend:'Ext.data.TreeStore',
model:'SM.DynamicTreeModel',
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'TGData1.json',
reader: {
type: 'json',
root: 'children'
}
},
autoLoad: true
});


Ext.define('SM.view.compareScenario.DynamicTree', {
extend: 'Ext.tree.Panel',
alias: 'widget.DynamicTree',
frame: true,
columnLines: true,
autoLoad: false,
initComponent: function(){
var config = {
columns: [],
rowNumberer: false
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
this.callParent(arguments);
},
storeLoad: function(){
var columns = [];
Ext.each(this.store.proxy.reader.jsonData.columns, function(column){
columns.push(column);
});

this.reconfigure(this.store, columns);
this.store.getRootNode(this.store.getRootNode);
},
onRender: function(ct, position){
SM.view.compareScenario.DynamicTree.superclass.onRender.call(this, ct, position);
this.store.load({
scope: this,
callback: function(records, operation, success) {
this.storeLoad();
}
});
}
});




var influencesTree = {
xtype: 'DynamicTree',
id: 'influencesTree',
pading: '5',
region: 'south',
height: '70%',
collapsible: true,
rootVisible: false,
store: 'DynamicTreeStore'
};


The json file is as follows:
{
"metaData": {
"fields": [
{"name":"0", "type":"string"},
{"name":"1", "type":"string"},
{"name":"2", "type":"string"}
]
},
"columns" : [
{
"xtype":"treecolumn", //this is so we know which column will show the tree
"text":"Override Type",
"flex":"2",
"sortable":"true",
"dataIndex":"0"
},
{
"text":"Scenario 1",
"dataIndex":"1"
},
{
"text":"Copied Scenario",
"dataIndex":"2"
}
]
,
"text": ".",
"children": [{
"0":"CFO",
"1":"15",
"2":"16",
"children":[{
"0":"AW",
"1": "5",
"2": "5",
"leaf": "true",
},
{
"0":"AV",
"1":"10",
"2":"11",
"leaf": "true",
}
]
}
]
}


The tree renders, but the child nodes cannot be expanded as the + icon is not shown. Instead of + icon, a checkbox is rendered.


Any help/suggestions for the same will be highly appreciated.


Thanks,
Shalini

fmoseley
25 Aug 2014, 5:46 PM
Hello Shalini you may get more feedback if you create a fiddle (https://fiddle.sencha.com/#home) reproducing the issue. Much easier to debug and digest than code snippets. You should also use [CODE] tags when posting code.