Extjs: Tree, Выбор узла после создания дерева

Question

У меня есть простая TreePanel. Я хотел бы выбрать конкретный узел при загрузке. Узлы из удаленного файла (JSON).

Дерево загружается как положено. Тем не менее, узел не выбирается. Firebug показывает узел как неопределенный. Это возможно из-за асинхронного свойства. Но я не могу настроить этот другой способ или указать выбранный узел.

Любые предложения приветствуются, и спасибо.

    LeftMenuTree = new Ext.tree.TreePanel({
    renderTo: 'TreeMenu',
    collapsible: false,
    height: 450,
    border: false,
    userArrows: true,
    animate: true,
    autoScroll: true,
    id: 'testtest',
    dataUrl: fileName,
    root: {
  nodeType: 'async',    
     iconCls:'home-icon',
     expanded:true,
       text: rootText
    },
    listeners: {
        "click": {
    fn: onPoseClick,
                 scope: this
               }
        },
          "afterrender": {
       fn: setNode,
       scope: this 
      }  
 });
function setNode(){
 alert (SelectedNode);
  if (SelectedNode == "Orders"){
    var treepanel = Ext.getCmp('testtest');
    var node = treepanel.getNodeById("PendingItems");
    node.select();
  }
} 

Answer 1

Я использую этот код в TreeGrid для выбора узла

_I.treeGrid.getSelectionModel().select(_I.treeGrid.getRootNode());

Я не пробовал это в TreePanel, но поскольку TreeGrid основан на нем, я просто предполагаю, что это работает. Я использовал событие загрузки загрузчика для добавления аналогичного кода после выполнения запроса XHR, поэтому попробуйте написать функцию setNode следующим образом:

var loader = LeftMenuTree.getLoader();
loader.on("load", setNode);    
function setNode(){
     alert (SelectedNode);
      if (SelectedNode == "Orders"){
        var treepanel = Ext.getCmp('testtest');
        treepanel.getSelectionModel().select(treepanel.getNodeById("PendingItems"));
      }
    }

Answer 2

это работа для меня ...

var loader  = Ext.getCmp('testtest').getLoader();
loader.on("load", function(a,b,c){ 
   b.findChild("id",1, true).select(); // can find by any parameter in the json
}); 

Answer 3

Я задокументировал способ сделать что-то очень похожее здесь:

http://www.sourcepole.ch/2010/9/28/understanding-what-s-going-on-in-extjs

вам нужно убедиться, что выбранный вами узел виден. Вы можете сделать это путем обхода дерева и node.expand () всех родительских узлов (от корня вниз).

Answer 4

Если вы используете достаточно свежую версию ExtJS, тогда я считаю, что использовать ViewModels и конфигурацию Selection гораздо проще для такого рода вещей.

Что-то вроде:

LeftMenuTree = new Ext.tree.TreePanel({
renderTo: 'TreeMenu',
collapsible: false,
height: 450,
border: false,
userArrows: true,
animate: true,
autoScroll: true,
id: 'testtest',
dataUrl: fileName,
bind: {
    Selection: '{SelectedNode}'
}, 
root: {
   nodeType: 'async',    
   iconCls:'home-icon',
   expanded:true,
   text: rootText
},
listeners: {
    "click": {
       fn: onPoseClick,
       scope: this
    }
    "afterrender": {
       fn: setNode,
       scope: this 
    }  
 });

(Вам необходимо настроить ViewModel в TreePanel или собственном представлении)

Тогда, если вы используете ViewController и setNode является членом:

setNode: function(){
 var nodeToSelect = // code to find the node object here
 this.getViewModel().set('Selection', nodeToSelect);
} 

Хорошая особенность подхода ViewModel заключается в том, что он, кажется, просто автоматически обрабатывает все проблемы рендеринга / загрузки данных.

Answer 5

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