Dynamic node loading TreeStore/Panel

[da_b0uncer]

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]

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]

Thank you.

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

[tvanzoelen]

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]

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]

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]

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]

Hi da_b0uncer

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

[da_b0uncer]

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]

Кто ниб знает когда откроют официальный сайт