web-dev-qa-db-fra.com

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

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érer le nœud de sélection dans un TreePanel? Merci.

extjstreepanel
16
JD.

Ce que vous feriez, c'est créer un gestionnaire d'événements. Chaque objet ExtJs est associé à un certain nombre d’événements. Vous écririez un gestionnaire d'événement (une fonction) que vous pourrez ensuite affecter à un écouteur d'événement. Ainsi, dans ce cas, vous voudrez probablement affecter un gestionnaire d’événements à 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 nœud déjà sélectionné? À ce stade, vous devez accéder au modèle de sélection de TreePanel. Vous avez mentionné une action de bouton. Supposons que vous souhaitiez appliquer une fonction au gestionnaire de clic de ce bouton 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 flyweight pour obtenir une référence rapide au TreePanel lui-même, puis vous avez utilisé la méthode interne de ce TreePanel pour obtenir son 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, 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 de l'application AIR) est assez étendue. Le manuel d'Ext Core peut également vous donner un aperçu du développement d'ExtJS, même si vous n'utilisez pas directement le Core.

17
Steve -Cutter- Blades
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!');
            }

        }

    }]

});
11
Sun

Dans Ext JS 4, vous pouvez placer un écouteur dans l’arborescence de la manière suivante:

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

}
5
chris
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

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

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

Pour ExtJS 4 ...

J'ai ajouté le programme d'écoute suivant dans mon panneau d'arborescence:

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

où selected_node est une variable globale. Des fonctions telles que append et remove peuvent être utilisées avec cette variable d'enregistrement, par exemple:

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

J'ai créé des boutons pour Ajouter un nœud et Supprimer un nœud, qui utilisent ce qui précède pour ajouter et supprimer des nœuds au nœud sélectionné. remove () supprimera le noeud sélectionné ainsi que tous les noeuds enfants!

Vous pouvez également obtenir le nœud sélectionné à tout moment en utilisant (la sélection s'effectue avec un clic gauche ou droit): Var selected_node = Ext.getCmp ('tree_id'). GetSelectionModel (). GetSelection () [0 ];

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

@Steve

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

ne va pas au travail, utilisez

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

au lieu.

1
Johannes

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()
1
Chris

Simple ....

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