Wie finde ich den ausgewählten Knoten in einem ExtJS TreePanel?

Question

Ich versuche, den ausgewählten Knoten, wenn vorhanden, eines TreePanel abzurufen, wenn der Benutzer auf eine Schaltfläche klickt. Wie rufen Sie den Auswahlknoten in einem TreePanel ab? Vielen Dank.

Answer 1

Sie würden einen Event-Handler erstellen. Jedes ExtJs-Objekt verfügt über eine Reihe von Ereignissen, die automatisch mit diesen verknüpft sind. Sie würden einen Event-Handler (eine Funktion) schreiben, den Sie dann einem Event-Listener zuweisen könnten. In diesem Fall möchten Sie wahrscheinlich dem Click-Ereignis Ihrer TreePanel-Komponente einen Event-Handler zuweisen.

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 
}; 

Aber was passiert, wenn Sie einen Knoten kennen möchten, der bereits ausgewählt ist? An diesem Punkt müssen Sie auf das Auswahlmodell von TreePanel zugreifen. Sie haben eine Tastenaktion erwähnt. Angenommen, Sie haben eine Funktion wie die Schaltfläche Click-Handler anwenden wollte den ausgewählten Knoten zu erhalten:

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

Sie haben das Fliegengewicht Element erhalten einen schnellen Hinweis auf die TreePanel selbst dann verwendet, dass TreePanel internen Verfahren für das Erhalten der es ist Auswahlmodell. Danach haben Sie die interne Methode des Auswahlmodells (in diesem Fall das DefaultSelectionModel) verwendet, um den ausgewählten Knoten zu erhalten.

Sie finden eine Fülle von Informationen in der Ext JS Dokumentation. Die Online API (und Offline AIR App) ist ziemlich umfangreich. Das Ext Core-Handbuch kann Ihnen auch einen großen Einblick in die ExtJS-Entwicklung geben, auch wenn Sie den Core nicht direkt verwenden.

Answer 2

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

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

Answer 3

@Steve

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

geht nicht,

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

stattdessen zu arbeiten.

Answer 4

In Ext JS 4 können Sie einen Listener auf dem Baum-Panel so:

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

Für ExtJS 4 ...

ich folgende Zuhörer in meinem Baum-Panel hinzugefügt haben :

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

wobei selected_node eine globale Variable ist. Funktionen wie append und entfernen können mit dieser Platte Variable z.B .:

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

I Tasten geschaffen für Knoten hinzufügen und löschen Knoten, die die oben verwenden verwendet werden, um anhängen und entfernen Knoten an den ausgewählten Knoten. remove() entfernt den ausgewählten Knoten sowie alle untergeordneten Knoten!

Sie können auch den ausgewählten Knoten jederzeit erhalten mit (die Auswahl erfolgt sowie die rechte Maustaste mit links.): var selected_node = Ext.getCmp ('tree_id') getSelectionModel() getSelection() [0. ];

Answer 7

In ExtJS4 können Sie die Methode getLastSelected() verwenden, die das zuletzt ausgewählte Element in einem Baum zurückgibt.

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

Ein Beispiel könnte wie folgt aussehen:

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); 
} 

Dies ist für 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

Einfache ....

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