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请求完成后，我使用加载器的load事件来插入类似的代码，所以尝试编写你的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

这是因为在渲染树之前，节点实际上是不可选择的。尝试将节点选择添加到侦听render事件的事件侦听器。

Answer 5

如果您使用的是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 
    }  
 });

（您需要在TreePanel或拥有的视图中设置ViewModel）

然后假设您正在使用ViewController并且setNode是成员：

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

ViewModel方法的优点在于，它似乎可以自动处理所有渲染/数据加载问题。

Extjs：Tree，创建树后选择节点

5 个答案: