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/showthre...-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]

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