Javascript Extjs：树，创建树后选择节点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2623042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extjs: Tree, Selecting node after creating the tree
提问by Natkeeran
I have a simple TreePanel. I would like to select a particular node upon loading it. The nodes are from a remote file (json).
我有一个简单的 TreePanel。我想在加载时选择一个特定的节点。节点来自远程文件 (json)。
The tree is loading as expected. However, the node is not being selected. Firebug shows node as undefined. This perhaps because of the async property. But, I an unable to configure this other wise, or specify the node be selected.
树正在按预期加载。但是，该节点未被选中。Firebug 将节点显示为未定义。这可能是因为 async 属性。但是，我无法以其他方式进行配置，或指定要选择的节点。
Any suggestions welcomed, and thank you.
欢迎任何建议，谢谢。
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();
}
}
采纳答案by Mike Clark
This is because the node isn't really selectable until the tree has been rendered. Try adding your node selection to an event listener listening for the render event.
这是因为在树被渲染之前节点实际上是不可选择的。尝试将您的节点选择添加到侦听渲染事件的事件侦听器。
回答by SBUJOLD
I use this code in the TreeGrid to select a node
我在 TreeGrid 中使用此代码来选择一个节点
_I.treeGrid.getSelectionModel().select(_I.treeGrid.getRootNode());
I haven't tried this in a TreePanel but since the TreeGrid is based on it I'll just assume this works. I used the load event of the loader to plugin similar code after the XHR request was done, so try to write your setNode function like this:
我还没有在 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"));
}
}
回答by XavierG.
this work for me...
这对我来说工作......
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
});
回答by Tomá? Pospí?ek
I have documented a way to accomplish something very similar here:
我在这里记录了一种完成非常相似的事情的方法：
http://www.sourcepole.ch/2010/9/28/understanding-what-s-going-on-in-extjs
http://www.sourcepole.ch/2010/9/28/understanding-what-s-going-on-in-extjs
what you'll need to make sure is that the node that you are selecting is visible. You can accomplish that by traversing the tree and node.expand()ing all the nodes parents (from the root down).
您需要确保您选择的节点可见。您可以通过遍历树和 node.expand() 来完成所有节点的父节点（从根向下）。
回答by Matt Allwood
If you're using a recent enough version of ExtJS then I find using ViewModels and the Selection config far easier for this kind of thing.
如果您使用的是足够新的 ExtJS 版本，那么我发现使用 ViewModels 和 Selection 配置来处理此类事情要容易得多。
Something like:
就像是：
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
}
});
(You'll need to either have a ViewModel set up in the TreePanel or the owning view)
（您需要在 TreePanel 或拥有视图中设置一个 ViewModel）
Then assuming you're using a ViewController and setNode is a member:
然后假设您使用的是 ViewController 并且 setNode 是成员：
setNode: function(){
var nodeToSelect = // code to find the node object here
this.getViewModel().set('Selection', nodeToSelect);
}
The nice thing about the ViewModel approach is that it seems to just handle all of the rendering / data loading issues automatically.
ViewModel 方法的好处在于它似乎只是自动处理所有渲染/数据加载问题。
