Extjs treepanel: how to drop a node on leaf nodes

Question

Does anybody know how to enable drag and drop onto leaf nodes of a treepanel?

My scenario is exactly like this one: http://dev.sencha.com/deploy/dev/examples/tree/reorder.html but I need also to append items to leaf nodes.

Thanks

Answer 1

I presume the OP wants to know if a leaf node can have an item dropped on it and thus become non-leaf (the item becomes its child). I also find that the example does not support this...

Update: the following post on the Sencha forums addresses this issue directly:

http://www.sencha.com/forum/showthread.php?17522-2.0rc1-2.0.1-TreePanel-Dropping-onto-a-Leaf-Node/page2

I applied the suggestion (mark nodes without children "expanded" and "loaded"), and I find that Ext will use the "leaf" icon, but still allow you to drop things on it. When the user drops an item onto such a node, the icon changes to a folder. The "leaf" config option will prevent a node from ever having items dropped onto it.

Answer 2

don't touch "leaf" or "loaded" or "expanded" attributes --> it will cause problems …

instead you can add virtual node to the children attribute and make it invisible and make expandable = false (to get rid of plus sign) so you can then add nodes to it like :

leafNode : { 
    expandable : false,
    children :[
       {visible : false}
    ]
}

then after drop happened in the drop event reset the expandable as :

overModel.data.expandable = true;

Answer 3

My solution is to return empty array in children param if there is no children.

Here is an Ruby on rails backend example:

      {
        id: record.id,
        name: record.name,
        children: record.has_children? ? nil : []
      }

It will no show + sign near the record if there is no children