如何在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); 
}