¿Cómo encuentro el nodo seleccionado en un TreePanel de ExtJS?

Question

Estoy tratando de recuperar el nodo seleccionado, si lo hubiera, de un TreePanel cuando el usuario hace clic en un botón. ¿Cómo recuperas el nodo seleccionado en un TreePanel? Gracias.

Answer 1

@Steve

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

no va a funcionar, usar

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

en lugar.

Answer 2

En Ext JS 4 puedes poner un oyente en el panel del árbol de esta manera:

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 3

En ExtJS4 puede usar el método getLastSelected () que devuelve el último elemento seleccionado en un árbol.

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

Un ejemplo podría verse así:

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

Answer 4

Lo que harías es crear un controlador de eventos. Cada objeto ExtJs tiene una serie de eventos que se asocian automáticamente con ellos. Escribiría un controlador de eventos (una función) que luego podría asignar a un detector de eventos. Por lo tanto, en este caso, es probable que desee asignar un controlador de eventos al evento ''clic'' de su componente 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
};

Pero, ¿qué sucede si desea conocer un nodo que ya está seleccionado? En ese momento, deberá acceder al Modelo de selección de TreePanel. Usted mencionó una acción de botón. Supongamos que desea aplicar una función al controlador de clics de ese botón para obtener el nodo seleccionado:

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

Usó el elemento de peso mosca para obtener una referencia rápida al TreePanel en sí, y luego usó el método interno de ese TreePanel para obtener su Modelo de selección. Después de eso, utilizó el método interno de ese Modelo de selección (en este caso, el Modelo de selección predeterminado) para obtener el Nodo seleccionado.

Encontrará una gran cantidad de información dentro de la documentación de Ext JS. La API en línea (y fuera de línea de la aplicación AIR) es bastante extensa. El manual de Ext Core también puede brindarle una gran cantidad de información sobre el desarrollo de ExtJS, incluso si no está usando el Core directamente.

Answer 5

Para ExtJS 4 ...

He añadido la siguiente escucha en el panel de mi árbol:

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

donde selected_node es una variable global. Las funciones como agregar y eliminar se pueden usar con esta variable de registro, por ejemplo:

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

He creado botones para Agregar nodo y Eliminar nodo que usan lo anterior para agregar y eliminar nodos al nodo seleccionado. remove () eliminará el nodo seleccionado, así como todos los nodos secundarios!

También puede obtener el nodo seleccionado en cualquier momento usando (la selección se produce con el botón izquierdo y derecho del mouse): var selected_node = Ext.getCmp (''tree_id''). GetSelectionModel (). GetSelection () [0];

Answer 6

Sencillo ....

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

Answer 7

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

Answer 8

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

Esto es para ExtJS4 TreePanel

Answer 9

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

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

Answer 10

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

        }

    }]

});