View Full Version : Treepanel - scroll a node into view

15 Mar 2012, 7:49 AM
I have been trying to solve this problem for days, searching the net but can't find a working solution.
Using Extjs 4.
I have a treepanel and using the method:
treePanelMy.selectPath(path, null, null, nodeFound);

function nodeFound(bSuccess, oLastNode)
// here would be the code to scroll the oLastNode into view
// something like: oLastNode.scrollIntoView();

This part works and it opens and selects the desired node.
But the problem is when the node is not visible, I would like to scroll it into view.
The treepanel has scrollbars and they work if used manually to scroll.

Please help.

15 Mar 2012, 10:52 AM
In 4.0.7 you have the scrollByDeltaX. In 4.1.0 you have the scrollBy methods both on the tree panel.

16 Mar 2012, 3:12 AM
Thank you for your reply.

I have tried the scrollByDeltaX but unfortunately it does nothing.

Here is the part of the config parameters for scroll behavior I use:

treePanelMy = Ext.create("Ext.tree.TreePanel",
scroll : false, // hides the "outer" scroll bar because it doesn't work
viewConfig : {style : {overflowY : 'auto'}}, // shows the "inner" scroll bar which works

Maybe the scrollByDeltaX acts on the "outer" scrollbar which doesn't work if I scroll manually (that's why I use scroll: false).

Even if scrollByDeltaX works, how would I calculate the amount of the scroll ?

Hope I will find a solution because this functionality is crucial.


8 May 2012, 1:53 PM
I would also like to know the answer to this question. Using selectPath() does indeed expand to the correct path but I am unable to scroll to the selected node. It seems to be attempting to scroll but the selected node is not always in view.

28 Jun 2012, 1:49 AM
Does anybody found some solution for this problem?

9 Jul 2012, 8:48 AM
So here is the solution that I was able to use successfully since no one seems to care about an answer.

afterlayout: function(container, layout, eOpts){
//this.getSelectionModel().select(0) with e.data.index
log("got here ..."+type);
var t = this;
if(e.data.text == type){

You basically get the view & set the focused row to whatever you find the node as, I use type in this example.

- Ross

12 Aug 2012, 8:03 PM

for 4.0.7: Put it into your treepanel listeners:

'afterlayout': function(container, layout, eOpts) {
// this.treeNodeId - needed node
var nd = this.getStore().getNodeById(this.treeNodeId);
if (!Ext.isEmpty(nd)) {
var n = nd.parentNode;
do {
n = n.parentNode;
} while (!Ext.isEmpty(n))

21 Mar 2013, 6:32 AM
for ExtJs 4.1.3, i used a treepanel like this :

1. when needed (in my case when my window open), I call this

myTreeStore.initialLoad=true; // custom property
myTreeStore.ownerTree.selectPath(record.getPath(), 'id');

2. the 'selectPath' fire the event 'afterlayout' of the tree panel :

xtype: 'treepanel',
flex: 3,
store : myTreeStore,
rootVisible: false,
multiSelect : false,
useArrows: true,
autoScroll : true,
listeners: {
afterlayout: function(container, layout, eOpts) {
var nd = this.getSelectionModel().getLastSelected();
// I add a property 'initialLoad' to my treestore,
// and set the value to true after the 'getPath(...)'
// then the focus is made only when I 'auto' select a record ...
if (!Ext.isEmpty(nd) && this.getStore().initialLoad) {
this.getStore().initialLoad = false;
// nd.store.indexOf(nd) didn't work, I want to know
// the 'global' row id of the whole treeview ....
this.getView().store.indexOf(nd)) // return

25 May 2013, 3:51 AM
I am new to Extjs. and using Extjs4.1.3.
I have my code like this.
extend: 'Ext.data.Model',
fields: ['imageSort','co' , 'text', 'leaf', 'checked','i','disabled']

in treepanel node level,I want to show imageSort next to the node text.

or how can we change the show order of text and icon.


9 Aug 2013, 6:48 AM
worked 100% for me once I took out the initialLoad factor. Thanks!

19 Sep 2013, 9:45 AM
I have the same issue, but... The following code works well in chrome and opera, and does not scroll in ie and firefox. What's happening? :-?

TreePanel.collapseAll(function () {
TreePanel.store.load({callback: function (records, operation, success) {
TreePanel.expandAll(function() {
TreePanel.getRootNode().cascadeBy(function (fn, scope, args) {
var node = this;
if (node.get('text') == nodename) {
Ext.get(TreePanel.view.getNode(node)).scrollIntoView(TreePanel.view.el, false, true);

19 Sep 2013, 10:05 AM
Ah sorry, I wasn't paying attention, works with animate : false in the tree