PDA

View Full Version : Tree - event/method for when tree.expandAll loaded?



Peter Hawkes
4 Aug 2007, 7:03 AM
Hi,

I have a tree menu that works with a 'nested set model' backend. I have managed to get it to sort, add, edit and delete to unlimited depth categories. What I can't seem to figure out is out to fire an event when all nodes have been loaded.

Due to sending my full tree back to the server on DnD and any node created or deleted I need all nodes opened which I am doing when the page loads like so:



var root = new Tree.AsyncTreeNode({
text: 'Categories',
draggable:false,
id:1
});
tree.setRootNode(root);
tree.render();
root.expand();
tree.expandAll();


So that does what I want, opens every node via my loader. Is there an event to check when the entire tree has expanded, so when tree.expandAll() has finished?

Obviously this:


root.on("load",function(){
alert("tree loaded");
});


fires on every node that finishes loading.

I can't have my users doing anything to the tree until its fully loaded, otherwise it breaks the nested set model (MySQL). Apologies if this is a simple question, I am very new to ExtJS and have had to jump into the deep end a little.

Thanks

Peter

evant
4 Aug 2007, 7:55 AM
It looks as though you're loading all of the nodes straight away, so is there any point in loading them asynchronously?

Peter Hawkes
4 Aug 2007, 8:51 AM
It looks as though you're loading all of the nodes straight away, so is there any point in loading them asynchronously?

That is a valid point, however since a tree could have unlimited depth nodes it is easier to load it asynchronously, probably a lazy option so I may need to rethink my approach perhaps.

An example tree in mysql looks like this:



mysql> select id, name, lft, rgt from categories order by lft ASC;
+-----+------------------------------+------+------+
| id | name | lft | rgt |
+-----+------------------------------+------+------+
| 1 | Categories | 1 | 58 |
| 185 | Food | 2 | 57 |
| 186 | Fruit | 3 | 14 |
| 189 | Apples | 4 | 7 |
| 214 | Cox | 5 | 6 |
| 211 | Pears | 8 | 9 |
| 212 | Bananas | 10 | 11 |
| 213 | Oranges | 12 | 13 |
| 187 | Meat | 15 | 26 |
| 206 | Beef | 16 | 17 |
| 207 | Lamb | 18 | 23 |
| 209 | British Lamb | 19 | 20 |
| 210 | New Zealand Lamb | 21 | 22 |
| 208 | Pork | 24 | 25 |
| 190 | Fish | 27 | 56 |
| 192 | Salmon | 28 | 33 |
| 191 | Fresh Salmon | 29 | 30 |
| 196 | Tinned Salmon | 31 | 32 |
| 193 | Cod | 34 | 39 |
| 194 | Fresh Cod | 35 | 36 |
| 195 | Frozen Cod | 37 | 38 |
| 197 | Tuna | 40 | 55 |
| 199 | Fresh Tuna | 41 | 44 |
| 205 | Tuna from Sea | 42 | 43 |
| 198 | Tinned Tuna | 45 | 54 |
| 200 | Tinned Tuna in Brine | 46 | 47 |
| 201 | Tinned Tuna in Spring Water | 48 | 49 |
| 202 | Tinned Tuna in Olive Oil | 50 | 51 |
| 203 | Tinned Tuna in Sunflower Oil | 52 | 53 |
+-----+------------------------------+------+------+



but has the potential to have unlimited depth nodes so I need to write the PHP to convert that to json, which is probably the best solution.

evant
4 Aug 2007, 9:00 AM
Whether it has unlimited depth or not, you're still loading the tree all at once. If you do it async it will be a lot more work, because you have to hit the server every time you want to load a new node, as opposed to loading the whole tree in one operation.