[2.0rc1/2.0.1] TreePanel: Dropping onto a Leaf Node

[hjdivad]

I guess this bug wasn't fixed for the 2.0 release. Shame. For the other posters, here's a workaround that I'm playing with that SEEMS to work all right thus far.

The custom loader prevents needless XHR requests.

    // custom treeloader so that we can treat '!has_children' more or less as
    // leaf, but still take advantage of the default drag & drop (which, by
    // default, will not allow appends to leaf - see possible bug
    // http://extjs.com/forum/showthread.php?t=17522&highlight=drop+leaf+node
    //  - this is only needed (in leiu of leaf => true|false) because we
    //  allowing appending to 'leaf' nodes, dynamically turning them into
    //  interior nodes
    var treeLoader =new Ext.tree.TreeLoader({
        dataUrl: '/resource/children'
    })
    treeLoader.on('beforeload', function(tree, node) { 
        if(node.attributes.has_children == false)
            return false
    })

    config = config || {}
    MyClass.superclass.constructor.call(this, Ext.apply({
        el:                 'pad',
        loader:             treeLoader,

        autoScroll:         true,
        animate:            true,
        enableDD:           true,
        containerScroll:    true

       // , ... other params for toolbar, etc.
    },config)) 

The event handler 'expands' the leaf nodes to get the right icon (and more importantly, to eliminate the expand toggle).

    this.on('append', function(tree, parentNode, newNode, newNodeIndex) {
        if(newNode.attributes.has_children == false) {
            newNode.render()
            newNode.expand(false)
        }
    }) 

With the above, I make sure that children are loaded with no 'leaf' attribute (letting it default to false), but with has_children set appropriately.

[Comma]

for Ext 1.1.1 find in ext-all.js:

var H=J.allowChildren===false||J.isLeaf();

and replase on:

var H=J.allowChildren===false;

[kylegohn]

If I add the following to my ext-all.js with the 1.1 version. My leaf does accept children however, the icon for the node remains a leaf and not a folder. Do you know how I would go about declaring the image of the said node to automatically have the folder icon?


var H=J.allowChildren===false;

[microboat]

我的办法是重载Ext.data.Node，添加一个setLeaf方法，然后在tree的append事件中把节点的leaf都设为false。

Ext.override(Ext.data.Node, {
    setLeaf: function(value){
    this.leaf = value;
}
}); 

this.on('append',function(tree,p,n,index){
    n.setLeaf(false);
}); 

欢迎加入37921608群（QQ）一起研讨Ext。

[schmidetzki]

I guess this bug wasn't fixed for the 2.0 release. Shame. For the other posters, here's a workaround that I'm playing with that SEEMS to work all right thus far.

Thxs. That solved my problem.
To the general discussion about bug/no-bug:
Testing for isLeaf() is not realy the bug. It-s OK. leaf==tue means that the node may never have children (like a document in a directory tree).
The bug is however, that the treeloader automaticaly adds a plus sign if leaf==false (therefore you may never have empty directories)
The plus sign should only triggerd by something like node.hasChildren and nothing else.

[Keri Henare]

I believe that I have found an incredibly simple solution to this problem.

When the server returns the JSON response for the tree I add the following parameters:

'expanded' => !$node->hasChildren(),
'loaded' => !$node->hasChildren()

And to the TreePanel I add:

baseAttrs: {
    allowChildren: true,
    leaf: false
}

So basically, if the node has no children then it still isn't a leaf (because a leaf can't have children) but as far as the TreePanel is concerned it has already been expanded and had it's children loaded.

expanded - Expands the node and (as the node has no children) displays a page icon instead of a folder icon.

loaded - Tells TreePanel not to make another request to get this nodes children, so no extra HTTP request and no spinning loading icon.

This has worked perfectly for me and is very simple.

[Romanticus]

Thanx Keri, this is exactly the simple solution I was searching for.

Romanticus

[[email protected]]

Thanks again Keri, excellent sollution and it still works for Ext 4.1 !

[? Webdesign Rostock]

Thanks!

[debopomac]

You can add:
 viewConfig: {
                        listeners: {
                            beforedrop: function (node, data, dropRec, dropPosition, eOpts) {
                                   eOpts.cancelDrop();
                                    dropRec.set('expanded', true);
                                    dropRec.set('leaf', false);
                                    dropRec.appendChild(data.records[0]);
},                            drop: function (node, data, dropRec, dropPosition) {
                                // //debugger;
                                var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('text') : ' on empty view';
                            }
},

                        plugins: {
                            ddGroup: 'user-dd',
                            dragGroup: 'user-dd',
                            ptype: 'treeviewdragdrop',
                            appendOnly: false
                        }
}

to the Ext.tree.Panel definition.

It will add the record to the leaf node as well as other nodes as desired