如何在ExtJS TreePanel中找到所选节点？

Question

我正在尝试在用户单击按钮时检索TreePanel的所选节点(如果有).如何检索TreePanel中的选择节点？谢谢.

Answer 1

你要做的是创建一个事件处理程序.每个ExtJs对象都有许多与它们自动关联的事件.您将编写一个事件处理程序(一个函数),然后您可以将其分配给事件侦听器.因此,在这种情况下,您可能希望为TreePanel组件的"click"事件分配事件处理程序.

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非常广泛.即使您没有直接使用Core,Ext Core手册也可以让您深入了解ExtJS开发.

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

}