如何在ExtJS TreePanel中找到选定的节点？

Question

我试图在用户单击按钮时检索TreePanel的选定节点（如果有的话）。你如何检索TreePanel中的选择节点？谢谢。

Answer 1

你会做的是创建一个事件处理程序。每个ExtJs对象都有一些自动关联的事件。你会写一个事件处理函数（一个函数），然后你可以分配给一个事件监听器。因此，在这种情况下，您可能希望将事件处理程序分配给TreePanel组件的“单击”事件。

var tbPan = new Ext.tree.TreePanel({ 
    itemId:'navTree', 
    autoScroll: true, 
    root: new Ext.tree.TreeNode({ 
     id: 'root', 
     text: 'My Tree Root', 
     rootVisible: true 
    }), 
    listeners: { 
     click: { 
      fn:clickListener 
     } 
    } 
}); 

clickListener = function (node,event){ 
    // The node argument represents the node that 
    // was clicked on within your TreePanel 
}; 

但是，如果您想知道已经选择的节点会发生什么？那时你需要访问TreePanel的选择模型。你提到了一个按钮动作。比方说，你想一个函数应用于该按钮的点击处理程序来获取所选择的节点：

var btn = new Ext.Button({ 
    text: 'Get Value', 
    handler: function (thisBtn,event){ 
     var node = Ext.fly('navTree').getSelectionModel().getSelectedNode(); 
    } 
}); 

您使用的轻量级元素得到快速参考TreePanel中本身，然后使用该TreePanel中对获得的内部方法它是选择模型。之后，您使用该选择模型（在此情况下为DefaultSelectionModel）内部方法来获取选定节点。

您可以在Ext JS文档中找到丰富的信息。在线（和离线AIR应用程序）API非常广泛。即使您不直接使用Core，Ext Core手册也可以让您深入了解ExtJS开发。

Answer 2

var selectednode = tree.getSelectionModel().getSelectedNode(); 

       //alert(selectednode); 
       if(selectednode!=tree.getRootNode()) 
       selectednode.remove(); 

Answer 3

@Steve

Ext.fly('navTree').getSelectionModel().getSelectedNode();

是行不通的，使用

Ext.getCmp('navTree').getSelectionModel().getSelectedNode();

代替。

Answer 4

在Ext JS的4，你可以把一个监听树面板上是这样的：

listeners: { 

    itemclick: { 
     fn: function(view, record, item, index, event) { 
      //the record is the data node that was clicked 
      //the item is the html dom element in the tree that was clicked 
      //index is the index of the node relative to its parent 
      nodeId = record.data.id; 
      htmlId = item.id; 
     } 
    } 

} 

Answer 5

var myTree = Ext.getCmp('tree-panel'); 
var selectednode = myTree.selModel.selNode 

Answer 6

对于ExtJS的4 ...

我在树面板中添加以下监听器：

listeners: 
{ 
    itemclick: function(view, record, item, index, e) 
    { 
    selected_node = record; 
    } 
} 

其中，selected_node是全局变量。像附加的功能和去除可与我已经创建了添加节点按钮和删除，其使用上述追加和删除节点到所选择的节点Node此记录变量例如为：

selected_node.appendChild({text: 'New Node', leaf: true}); 
selected_node.remove(); 

使用。 remove（）将删除所选节点以及所有子节点！您可能会在任何时间使用（选择发生在左键和右键点击时）： var selected_node = Ext.getCmp（'tree_id'）。getSelectionModel（）。getSelection（）[0 ]。

Answer 7

在ExtJS4中，您可以使用getLastSelected（）方法返回树中最后选择的项目。

见ExtJS的：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getLastSelected

一个例子可能是这样的：

var tree = this.up("window").down("supportedcontrolcircuitmodelselector"); 
var selectedCircuit = tree.getSelectionModel().getLastSelected() 

Answer 8

var nodesSelected = Ext.getCmp('foldersTree').getSelectionModel().selected.items; 
if(nodesSelected.length > 0) 
{ 
    var node = nodesSelected[0]; 
    console.log(node.internalId); 
} 

这是ExtJS4 TreePanel中

Answer 9

var tree = Ext.create('Ext.tree.Panel', { 
    store: store, 
    renderTo: 'tree_el', 
    height: 300, 
    width: 250, 
    title: 'ExtJS Tree PHP MySQL', 
    tbar : [{ 
     text: 'get selected node', 
     handler: function() { 
      if (tree.getSelectionModel().hasSelection()) { 
       var selectedNode = tree.getSelectionModel().getSelection(); 

       alert(selectedNode[0].data.text + ' was selected'); 
      } else { 
       Ext.MessageBox.alert('No node selected!'); 
      } 

     } 

    }] 

}); 

Answer 10

简单....

itemclick: function(view, record, item, index, e) 
{ 
    alert(record.data.text); 
}