Как найти выбранный узел в 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();
    }
});

Вы использовали элемент flyweight для быстрой ссылки на сам TreePanel, а затем использовали внутренний метод TreePanel для получения его модели выбора. После этого вы использовали внутренний метод этой модели выбора (в данном случае DefaultSelectionModel), чтобы получить выбранный узел.

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

Answer 2

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 3

В 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 4

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

Это для ExtJS4 TreePanel

Answer 5

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

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

Answer 6

Для ExtJS 4 ...

Я добавил следующий слушатель в панель дерева:

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

где selected_node - глобальная переменная. Функции, такие как добавление и удаление, могут использоваться с этой переменной записи, например ::10000

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

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

Вы также можете получить выбранный узел в любое время, используя (выбор происходит как левой, так и правой кнопкой мыши): var 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 myTree = Ext.getCmp('tree-panel');
var selectednode = myTree.selModel.selNode

Answer 9

@ Стив

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

не сработает, используйте

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

вместо.

Answer 10

Простой ....

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