Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 23

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

  1. #11

    Default Workaround

    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.
    PHP Code:

    // 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
        //  - 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({
    treeLoader.on('beforeload', function(treenode) { 
    node.attributes.has_children == false)

    config config || {}
    el:                 'pad',
    loader:             treeLoader,

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

    // , ... other params for toolbar, etc.
    The event handler 'expands' the leaf nodes to get the right icon (and more importantly, to eliminate the expand toggle).
    PHP Code:
        this.on('append', function(treeparentNodenewNodenewNodeIndex) {
    newNode.attributes.has_children == 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.

  2. #12
    Ext User
    Join Date
    Aug 2007


    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;

  3. #13

    Default great change, but how do you manage the icon?

    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;

  4. #14


    PHP Code:
    Ext.override(, {
    setLeaf: function(value){
    this.leaf value;
    PHP Code:

  5. #15
    Ext User
    Join Date
    Mar 2007


    Quote Originally Posted by hjdivad View Post
    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.

  6. #16
    Sencha User
    Join Date
    May 2009
    Auckland, New Zealand


    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.
    Last edited by Keri Henare; 5 May 2009 at 8:59 PM. Reason: No sig

  7. #17


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


  8. #18
    Sencha Premium Member
    Join Date
    Aug 2007
    The Netherlands

    Default Thanks!

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

  9. #19

  10. #20

    Default Dropping onto leaf node

    You can add:
     viewConfig: {
                            listeners: {
                                beforedrop: function (node, data, dropRec, dropPosition, eOpts) {
                                        dropRec.set('expanded', true);
                                        dropRec.set('leaf', false);
    },                            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

Page 2 of 3 FirstFirst 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts