Tree scrolls to top on node expand.

Ext version tested:

• Ext 4.1.1

Browser versions tested against:

• IE8
• FF15
• Chrome

Description:

• When a node on a tree expands and loads from server the view scrolls to the top.

Steps to reproduce the problem:

• Scroll to the bottom of the tree panel
• Expand the last Node

The result that was expected:

• Last Node is shown with its children

The result that occurs instead:

• View scrolls to the top and the expanded node is not visible.

See this URL for live test case:
http://jsfiddle.net/dbrin/MZ5FG/show/light/


Operating System:

• Win7

As a workaround, configure your TreeGrid with

Code:

---

viewConfig: {
    preserveScrollOnRefresh: true
}

---

Strange, because if you modify extjs/examples/tree/treegrid.html to remove the singleExpand: true config, it does not exhibit your bug.

No other trees do either.

Perfect!

I can't reproduce this on the latest code:

http://screencast.com/t/9meV0wVt

Code:

---

Ext.define('ESSR.model.Request', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'idd',
        type: 'int'
    }, {
        name: 'name',
        type: 'string'
    }, {
        name: 'f1',
        defaultValue: 'field 1'
    }, {
        name: 'f2',
        defaultValue: ' some other default value'
    }]
});

Ext.require('*');

Ext.onReady(function() {

    var store = new Ext.data.TreeStore({
        model: 'ESSR.model.Request',
        autoLoad: false,
        proxy: {
            type: 'ajax',
            url: 'data.json',
            reader: {
                type: 'json',
                root: 'data'
            }
        },
        root: {
            expanded: false //important for autoload to work properly
        }
    });

    Ext.create('Ext.tree.Panel', {
        renderTo: Ext.getBody(),
        width: 550,
        height: 400,
        store: store,
        columns: [{
            xtype: 'treecolumn',
            text: 'IDD',
            dataIndex: 'idd',
            width: 120
        }, {
            text: 'Name',
            dataIndex: 'name',
            width: 120
        }, {
            text: 'F1',
            dataIndex: 'f1',
            width: 120
        }, {
            text: 'F2',
            dataIndex: 'f2',
            width: 120
        }]
    });
    store.getRootNode().expand();
});

---

Code:

---

{
    "data": [
        {
            "idd": 1,
            "name": "First"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 10,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 12,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 20,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 22,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 32,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 42,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 52,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 62,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 72,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 82,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 92,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 102,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 112,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 2,
            "name": "Second"
        }, {
            "idd": 120,
            "name": "Second"
        }
    ]
}

---

cool. is that with 4.1.2 ? is there a CDN I call pull from to use on JSFiddle ?

Yes, what will end up being 4.1.2.

No, there's no CDN, it has not yet been released.

I can reproduce it with ExtJs 4.1.3

viewConfig:{
preserveScrollOnRefresh:true
}
does the trick