PDA

View Full Version : Dynamic node loading TreeStore/Panel



da_b0uncer
8 Feb 2012, 5:15 AM
I have to implement a Tree, which could possibly have >10.000 nodes. But I can't find examples for this and the API-docs don't address this problem, it seems...

I want to just load the 1st leven, then, on expanding a 1st-level-node I want to load 10 new nodes etc.

Do I have to implement this stuff myself with the "on expand" event or does the TreeStore provide this functionality? In the example, just a small .json-file gets loaded, which contains the whole tree, so I don't know if the TreeStore could consume partial data and if yes, how it would be inserted.

tvanzoelen
8 Feb 2012, 5:55 AM
Just return the nodes of the first level in json with leaf is false if there are serverside nodes available. On expand the tree will trigger a load call to the server, and there you deliver the next load of nodes.

da_b0uncer
8 Feb 2012, 5:57 AM
Thank you.

can I deliver the child nodes with the expanded node as root node?

tvanzoelen
8 Feb 2012, 5:59 AM
No, just return the childnodes. It will send the root node (the node wich you expand) to the server, so you can look up the childnodes in you db.

Romick
8 Feb 2012, 6:02 AM
I think it is imposible for now. Because tree will be very slow on rendering/displaing.
Dynamic loading nodes can't solve this issue.
I have the same prodlem and couldn't solve it yet.
And yes its posible to load nodes as you said, but... unfortunately it's to slow...
It's easy to add nodes.


listeners: {
'beforeitemexpand': function(node, evtObj){
if (node.firstChild.data['col1'].length == 0) {// need to load childs, because no need to download twice
node.removeAll();
Ext.Ajax.request({
url: 'treeDataJSON.jsp',
params: {
id: node.data['id']//key id
},
success: function(response, me){
var data = Ext.decode(response.responseText);
if (data.success === true) {
node.appendChild(data.nodes);//add recieved nodes
}
}
});
}
},

And for other details:
http://www.sencha.com/forum/showthread.php?159843-Extjs4-tree-panel-is-loading-slowly-in-IE7

P.S. Let me know if you solve it i am interested in it too.

da_b0uncer
8 Feb 2012, 7:27 AM
so the server would get the expanded node and would answer with the children array like this?


[
{...},
{...},
{...}
]


@Romick:
We thought about 2 strategies for paging.
first: just show x nodes per page or just "load" the expanded nodes where just x nodes get expanded at once and you could expand more if you would like to see more.

the first idea had the problem, what to do in a case like this ( x = 4 ):



--- Page 1 ---
Root
A
B
C
--- Page 2 ---
1
2
3
D
--- Page 3 ---
E
F
1
2
--- Page 4 ---
3
4
5
6


But it would keep the size of the rendered tree constant (x).
The other idea would keep the size smaller than rendering the whole tree, but potentially rather big.

Romick
8 Feb 2012, 7:47 AM
Here is treedataJSON:



{
success: true,
<%
int id = request.getParameter("id")!=null?Integer.parseInt(request.getParameter("id")):0;
if (row == 0) { %>
"text":".","children":
[{
id:'1',
col2:'1 Approval',
iconCls:'task-folder',
colColor:'#F3BCF7',
children:[{}]//if there is sth to expand or leaf: true if not
},{
id:'2',
col2:'2 Supply Chain',
col3:'',
iconCls:'task-folder',
colColor:'#F7F1BC',
children:[{}]
}]
<%} else{%>
nodes:
[{
id:<%=(id+1)%>,
col2:'some text 1',
col5:'01-Nov-2011',
col6:'15-Dec-2010',
col7:'01-Nov-2010',
col8:'15-Dec-2010',
leaf: true
},
{
id:<%=(id+2)%>,
col2:'some text 2',
col5:'01-Nov-2011',
col6:'15-Dec-2010',
col7:'01-Nov-2010',
col8:'15-Dec-2010',
children:[{}]
}]
<%}%>
}

Romick
13 Feb 2012, 5:36 AM
Hi da_b0uncer

Can you put here your version of code whith 10.000 nodes?
And if not make threat answered please :)

da_b0uncer
13 Feb 2012, 5:56 AM
I can't post it, because I'm currently specifying and choosing frameworks for this task. I just wanted to check if Ext JS can do it. :)

My questions aren't answered, but I guess no one can answer them, so I will mark the thread as answered.

alisapetrova
1 Dec 2012, 1:39 AM
Кто ниб знает когда откроют официальный сайт

hemanthrpr
12 Jun 2013, 11:32 AM
Hello guys,

I'm stuck with the similar issue. I have tried the way which Romick has suggested, but as he said it is very slow for some first 30 children nodes. Then, it is fast irrespective of the children nodes under the clicked node.

Does anyone got the solution for it ?

hemanthrpr
13 Jun 2013, 12:24 PM
http://www.sencha.com/forum/showthread.php?115486-How-to-improve-performance-of-TreeNode.appendChild

(http://www.sencha.com/forum/showthread.php?115486-How-to-improve-performance-of-TreeNode.appendChild)This thread might help you, it worked in my case.