Панель дерева ExtJs. Как прокручивать узел

Question

У меня есть панель дерева, которую я расширяю программно.

Когда я разворачиваю узел, я хотел бы «перейти к» этому узлу, я имею в виду прокрутить его.

Как прокрутить панель дерева к определенному узлу?

UPDATE: Я использую Ext 4,1

Answer 1

В ExtJS 3.x вы можете попробовать призывающую фокус() на TreeNodeUI (myNode.ui.focus())

Answer 2

Попробуйте использовать selectPath()http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel-method-selectPath

Answer 3

Дерево асинхронно загружает каждый узел, и вам нужно вызвать фокус только после загрузки всех узлов. То, что вы собираетесь нужно сделать, это установить автозагрузку к ложным на корневой узел, а потом в коде вручную загрузить корневой узел в первый раз с помощью:

rootNode.expand(true, function(){ 
    myTreePanel.getView().focusRow(nodeyouwanttofocus); 
}); 

делать это таким образом позволяет использовать первый параметр функции расширения, который делает расширение полностью рекурсивным, а также гарантирует, что второй параметр, который является функцией, выполняется только после загрузки всех узлов, гарантируя, что представление является правильной высотой и что узел существует визуально.

Другой вариант, который позволяет более flexability является вклиниться в расширяемой событие:

var myTreeStore = Ext.create("Ext.data.TreeStore", { 
    listeners: { 
     expand: function(theParentNode){ 
      theParentNode.eachChild(function(node){ 
       if(nodeIWantSelected == node) 
        myTreePanel.getView().focusRow(node); 
      } 
     } 
    } 
}); 

и вы можете использовать .select модели выбора зацепить, чтобы выбрать узел (и я думаю, что он может сосредоточиться узел тоже).

Я не пробовал «selectPath», как предложил Sha before, что кажется намного проще в использовании, но вы можете подключить функцию focusRow в качестве обратного вызова, и я думаю, что это тоже сработает.

Answer 4

Вы можете использовать tree.getView().focusRow(), как это:

tree.expandPath(
    '/root/1/2/3', 
    'id', 
    '/', 
    function() { 
     tree.getView().focusRow(tree.getStore().getNodeById('3')); 
    } 
}); 

Но, если ваше дерево использовать animate: true и загружать каждый узел асинхронно и любой узел в пути не загружен еще этот подход не работает (дерево не прокручивается выбранный узел из-за нескольких обновлений макета).

Как временное решение вы можете:

1. набор animate: false для дерева;

2. добавить «afterlayout» слушателя, как это:

   tree.on('afterlayout', function() { 
       tree.getView().focusRow(tree.getSelectionModel().getSelection()[0]); 
   } 
   

   Я думаю, вы можете добавить этот обработчик, когда это необходимо, и удалить его, когда все будет сделано.