PDA

View Full Version : Problem loading the Tree nodes on demand



bevara.siva
2 Apr 2014, 3:23 AM
Hi,

We are using Sencha Architect 3.0 and ExtJs 4.2.x.

We are loading the TreeGrid using the JOSN object from the WCF service.
Its loading the data properly. But when we expand the tree its loading the complete store again in the child nodes as below.
48523
Here Sec1 and Sec2 are root nodes. These are repeating when I expand the node.
How can I prevent this?
How Can I remove the folder ICON from the tree node?
When I load the nodes ondemand, how can make the nodes as root (Expandable/Leaf) nodes.
As of now I am loading the nodes ondemand as below.


nodeinterface.removeAll();
Ext.Ajax.request({
url: '../Service1.svc/GetIndustryGroups',
success: function (response, me) {
var data = Ext.decode(response.responseText);
if (data.GetIndustryGroupsResult.length > 0) {
nodeinterface.appendChild(data.GetIndustryGroupsResult); //add recieved nodes
}
}
});


Its loading the tree grid as below:
48524

If you observe the nodes created as leaf nodes. But I wanted these as root nodes.

Please help us in fixing these.

Regards,
SivaPrasad.B

scottmartin
3 Apr 2014, 2:32 PM
It would be hard to say without seeing how you things setup .. model, json .. etc

Can you create a small test case?
https://fiddle.sencha.com/#home

bevara.siva
3 Apr 2014, 11:14 PM
Thank you for the response.

Following the code in fiddle:




Ext.application({
name : 'Fiddle',


launch : function() {
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string'},
{name: 'user', type: 'string'}
]
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json'
}
},
});





//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
rootVisible: false,
store: store,

//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'text',
flex: 2,
sortable: true,
dataIndex: 'text'
},{
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
sortable: true
}]
});
}
});




data1.json:




{
expanded: true,
children: [
{ text: "detention", user:"siva" },
{ text: "homework", user:"prasad" },
{ text: "buy lottery tickets", user:"mantri" }
]
}



Please help

Regards,
SivaPrasad.B

scottmartin
4 Apr 2014, 4:23 AM
You only provided 1 level of data?

but to show what is happening on your recursive calls ..



{
expanded: true,
children: [
{
text: "detention",
user: "siva"
// this node will reload data each time as a new node
},
{
text: "homework",
user: "prasad",
children: []
},
{
text: "buy lottery tickets",
user: "mantri",
children: []
}
]
}

bevara.siva
6 Apr 2014, 9:46 PM
Hi Scott,

Even with this 1 level of data, it is showing the Ex-pander button (as I didnt gave this as leaf), If I expand the node it is loading with the same 3 nodes as child nodes again.
I feel it should not show anything when I expand as it does not have the child nodes.

Regards,
SivaPrasad.B

bevara.siva
16 Apr 2014, 12:35 AM
Can anyone help me in this issue..

scottmartin
16 Apr 2014, 5:45 AM
As mentioned, you need to terminate your tree leafs .. so:

Good:


{
"text": "Root",
"Children": [
{
"text": "Folder 1",
"Children": [
{
"text": "Leaf 1-1",
"Children": []
},
{
"text": "Leaf 1-2",
"Children": []
}
]
},
{
"text": "Folder 2",
"Children": []
}
]
}




{
"text": "Root",
"Children": [
{
"text": "Folder 1",
"Children": [
{
"text": "Leaf 1-1",
"leaf": true
},
{
"text": "Leaf 1-2",
"leaf": true
}
]
},
{
"text": "Folder 2",
"leaf": true
}
]
}


Bad; ever expanding tree


{
"text": "Root",
"Children": [
{
"text": "Folder 1",
"Children": [
{
"text": "Leaf 1-1"
},
{
"text": "Leaf 1-2"
}
]
},
{
"text": "Folder 2"
}
]
}