Comment puis-je trouver le nœud sélectionné dans un TreePanel ExtJS?

Question

J'essaie de récupérer le nœud sélectionné, le cas échéant, d'un TreePanel lorsque l'utilisateur clique sur un bouton. Comment récupérez-vous le nœud select dans un TreePanel? Merci.

Answer 1

Ce que vous feriez serait de créer un gestionnaire d'événements. Chaque objet ExtJs a un nombre d'événements qui leur sont automatiquement associés. Vous devez écrire un gestionnaire d'événements (une fonction) que vous pouvez ensuite affecter à un écouteur d'événement. Dans ce cas, vous voudrez probablement affecter un gestionnaire d'événement à l'événement 'click' de votre composant 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 
}; 

Mais que se passe-t-il si vous voulez connaître un noeud déjà sélectionné? À ce stade, vous devrez accéder au modèle de sélection du TreePanel. Vous avez mentionné une action sur un bouton. Disons que vous vouliez appliquer une fonction que le gestionnaire de bouton de clic pour obtenir le nœud sélectionné:

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

Vous avez utilisé l'élément de poids mouche pour obtenir une référence rapide à la TreePanel lui-même, puis utilisé cette méthode interne de TreePanel pour obtenir la C'est le modèle de sélection. Après cela, vous avez utilisé la méthode interne de ce modèle de sélection (dans ce cas, la méthode interne DefaultSelectionModel) pour obtenir le nœud sélectionné.

Vous trouverez une mine d'informations dans la documentation Ext JS. L'API en ligne (et hors ligne AIR) est assez étendue. Le manuel Ext Core peut également vous donner une bonne idée du développement d'ExtJS, même si vous n'utilisez pas le Core directement.

Answer 2

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

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

Answer 3

@ Steve

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

ne va pas travailler, utilisez

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

à la place.

Answer 4

Ext JS 4 vous pouvez mettre un écouteur sur le panneau d'arbre comme celui-ci:

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

Pour ExtJS 4 ...

J'ai ajouté l'auditeur suivant dans mon panneau d'arbre :

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

où noeud_élément est une variable globale. Des fonctions telles que append et supprimer peuvent être utilisés avec cette variable d'enregistrement .: par exemple

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

J'ai créé des boutons pour le nœud Ajouter et Supprimer le noeud qui utilisent le ci-dessus pour ajouter et supprimer des nœuds au nœud sélectionné. remove() supprimera le nœud sélectionné ainsi que tous les nœuds enfants!

Vous pouvez également obtenir le nœud sélectionné tout moment en utilisant (la sélection se produit avec la gauche ainsi que de cliquer droit de la souris). var = SELECTED_NODE Ext.getCmp ('tree_id') getSelectionModel() getSelection() [0. ]

Answer 7

Dans ExtJS4, vous pouvez utiliser la méthode getLastSelected() qui renvoie le dernier élément sélectionné dans une arborescence.

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

Un exemple pourrait ressembler à ceci:

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

Ceci est pour 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

simple ....

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