Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    3
    Vote Rating
    1
    m1el is on a distinguished road

      0  

    Default Collapse/expand bug in Ext.tree.Panel

    Collapse/expand bug in Ext.tree.Panel


    Just one link.
    http://jsfiddle.net/4tHEy/4/

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,070
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

    In the future, please use the following template to report bugs:
    http://www.sencha.com/forum/showthre...o-report-a-bug

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,987
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    If you're using animation, you need to use the callback:

    Code:
    Ext.require([
        'Ext.tree.*',
        'Ext.data.*'
        ]);
    
    Ext.onReady(function() {
        var store = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true,
                children: [{
                    text: "homework",
                    id: 'killmeplz',
                    leaf: false,
                    expanded: false,
                    children: [{
                        text: "bug report",
                        leaf: true
                    }]
                }]
            }
        });
    
    
        var tree = Ext.create('Ext.tree.Panel', {
            title: 'Simple Tree',
            width: 200,
            height: 500,
            store: store,
            rootVisible: false,
            renderTo: Ext.getBody()
        });
        var child = tree.getRootNode().firstChild;
        setInterval(function(){
            child.expand(false, function(){
                setTimeout(function() {
                    child.collapse();
                }, 500);
            });
        }, 1000);
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    3
    Vote Rating
    1
    m1el is on a distinguished road

      1  

    Default


    If you're using animation, you need to use the callback:
    Yes, that is a workaround, but using expand/collapse should not clone elements no matter how I call them.
    This problem appeared when I tried to make single click expand on tree. When I tried double click (which was disabled using beforeitemdblclick) elements were cloned. Then I made this test when I'm not using mouse input to control tree nodes.

  5. #5
    Sencha Premium Member
    Join Date
    Jul 2013
    Posts
    1
    Vote Rating
    0
    Mister T is on a distinguished road

      0  

    Default


    I'm able to reproduce the problem fairly reliably by manually double clicking on a link/button that alternately expands and collapses the tree. I found that the more entries there are in the tree, the easier it is to reproduce.

    Code:
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [
                { text: "detention", leaf: true },
                { text: "homework", expanded: true, children: [
                    { text: "book report", leaf: true },
                    { text: "reading", leaf: true },
                    { text: "science", leaf: true },
                    { text: "alegrbra", leaf: true}
                     // more entries may be needed to repro reliably
                ] },
                { text: "buy lottery tickets", leaf: true }
            ]
        }
    });
    
    var panel = Ext.create('Ext.tree.Panel', {
        title: 'Simple Tree',
        width: 200,
        height: 150,
        store: store,
        rootVisible: false,
        renderTo: Ext.getBody()
    });
    var expand = true;
    var button = Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody(),
        handler: function() {
            if(expand) {
                panel.expandAll();
            } else {
                panel.collapseAll();
            }
            expand = !expand;
        }
    });
    I'm able to patch around this by overriding onBeforeExpand, onExpand, onBeforeCollapse, and onCollapse in Ext.tree.View to simply return when trying to collapse while expanding, and vice versa.