Как найти выбранный узел в ExtJS TreePanel?

Question

Я пытаюсь получить выбранный узел, если он есть, TreePanel, когда пользователь нажимает кнопку. Как получить выбранный узел в TreePanel? Благодарю.

Answer 1

Что бы вы сделали, это создать обработчик событий. Каждый объект ExtJs имеет несколько событий, которые автоматически связаны с ними. Вы должны написать обработчик событий (функцию), который затем можно назначить прослушивателю событий. Таким образом, в этом случае вы, вероятно, захотите назначить обработчик событий событию «click» вашего компонента 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 для получения это модель выбора. После этого вы использовали внутренний метод Selection Model (в данном случае DefaultSelectionModel), чтобы получить выбранный узел.

В документации Ext JS содержится большое количество информации. Онлайновый (и офлайн-приложение AIR) API довольно обширен. Руководство Ext Core также может дать вам представление о разработке ExtJS, даже если вы не используете Core напрямую.

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 - глобальная переменная. Такие функции, как добавлять и удалять можно использовать с этой записью переменной т.д .:

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

я создал кнопки для Add Node и Delete Node, которые используют выше для добавления и удаления узлов выбранного узла. remove() удалит выбранный узел, а также все дочерние узлы!

Вы также можете получить выбранный узел в любое время с помощью (выбор происходит с влево, а также правой кнопкой мыши):. вар 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); 
}