1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    5
    Vote Rating
    0
    dipesh.bodas is on a distinguished road

      0  

    Default Unanswered: scrolling to specific node in tree panel

    Unanswered: scrolling to specific node in tree panel


    Hi,

    I am trying to set focus on a specific node using treepanel.selectPath(). Its working fine and node is getting selected and even gets highlighted. but I am facing issue in scrolling as my treepanel window size is small and I can not resize it(constraints on my side).
    my sample tree :

    root
    ---parent1
    ---parent2
    ---parent3
    -child1
    -child2
    .....
    -child10


    I want to focus on child10. now when i run the app, child 10 gets selected and highlighted. but my window is able to show only 5 nodes at astime (with scrollbar of course). what i observe is the treepanel.selectpath(nodepath) or treepanel.getsSlectionModel().select(node) scrolls till the parent node in my window so the nodes visible to me are parent 3 to child4 even if node selected and highlighted is child10 it sets the starting point of vuisibilty as parent node. Can anyone help here? I want my window to focus on selected node,irrespective of its parent.

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,021
    Answers
    385
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      1  

    Default


    See if this works for you.
    The callback param in the selectPath() method has two params - the second being the HTMLelement of the last expanded/selected node. You can then get the tree node using the treeview's getNode() method. With that returned you can use scrollIntoView() to scroll the tree node into view within the treeview itself.

    http://jsfiddle.net/slemmon/P9TkZ/2/

    Code:
    tree.selectPath('/Root/buyLotteryTickets/10', 'text', '/', function (s, n) {
    	var nodeEl = Ext.get(tree.view.getNode(n));
    	nodeEl.scrollIntoView(tree.view.el, false, true);
    });

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    5
    Vote Rating
    0
    dipesh.bodas is on a distinguished road

      0  

    Default


    This works only if path to the node is expanded. In my case path is not yet expanded and i have to first expand and scroll to the node. I tried this approach by passing path to selectPath method but didn't work. It selected the node but didnt scroll to that node.Its giving same output as selectionModel.select(node)

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,021
    Answers
    385
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Hmm... does seem to be a little intermittent. I even tried doing everything as a callback from expandPath() and no dice. That was in v.4.1.1. When I ran the same code from jsFiddle in 4.2 beta things were better in Chrome on Mac OSX - worked every time without fail for me.

    That said, if you set animate: false on the tree you should be good.

    http://jsfiddle.net/slemmon/P9TkZ/3/

  5. #5
    Sencha User
    Join Date
    May 2009
    Posts
    19
    Vote Rating
    0
    anupkshah is on a distinguished road

      0  

    Default


    Thanks for the solution of animate:false.

    I am still finding this as an issue in the latest Ext JS 4.x

    It is a shame to turn off tree animations, so I tried to adapt your JS Fiddle example to temporarily disable animation and re-enable it only when selecting that path.

    An update JSFiddle is here:
    http://jsfiddle.net/vr2m1dg5/

    It is brittle because it relies on internal implementation, so use with care...!

    (In my situation if I dynamically add a tree node, I was trying to handle the expand/scroll inside the append event of the parent node, but in that scenario the node element could not be retrieved from the view, perhaps as it was not added to the dom. Instead, I waited for the Store append event to do this. That seems to do the trick, though sometimes it doesn't scroll down enough when there are lots of children already... looking into that...)

Thread Participants: 2