PDA

View Full Version : Treepanel - scroll a node into view



Habanero
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.

mitchellsimoens
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.

Habanero
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.


Regards,
Damir.

rjferguson21
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.

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

CMckenzie
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.getRootNode().eachChild(function(e){log(e.data.text);});
//this.getSelectionModel().select(0) with e.data.index
log("got here ..."+type);
var t = this;
this.getRootNode().eachChild(function(e){
if(e.data.text == type){
t.getSelectionModel().select(e.data.index);
t.getView().focusRow(e.data.index);
}
});
}

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

- Ross
rnorvell.com

jwagra
12 Aug 2012, 8:03 PM
Hi!

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.expand();
n = n.parentNode;
} while (!Ext.isEmpty(n))
this.getSelectionModel().select(nd);
this.getView().focusRow(nd.store.indexOf(nd));
}
},

phamel
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().focusRow(
this.getView().store.indexOf(nd)) // return
);
}
}
}
}

Manmohan
25 May 2013, 3:51 AM
Hi,
I am new to Extjs. and using Extjs4.1.3.
I have my code like this.
Ext.define('modelClass',{
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.

Thanks
Manmohan

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

void-demo
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) {
TreePanel.getSelectionModel().select(node);
Ext.get(TreePanel.view.getNode(node)).scrollIntoView(TreePanel.view.el, false, true);
}
});
});
}
});
});

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