16

当用户单击按钮时，我正在尝试检索 TreePanel 的选定节点（如果有）。如何检索 TreePanel 中的选择节点？谢谢。

4

10 回答 10

17

您要做的是创建一个事件处理程序。每个 ExtJs 对象都有许多与它们自动关联的事件。您将编写一个事件处理程序（一个函数），然后您可以将其分配给一个事件侦听器。因此，在这种情况下，您可能希望为 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();
    }
});

您使用享元元素快速参考 TreePanel 本身，然后使用 TreePanel 的内部方法获取它的选择模型。之后，您使用该选择模型（在本例中为 DefaultSelectionModel）的内部方法来获取选定节点。

您将在 Ext JS 文档中找到大量信息。在线（和离线 AIR 应用程序）API 非常广泛。Ext Core 手册还可以让您深入了解 ExtJS 开发，即使您不直接使用 Core。

于 2009-05-05T13:19:37.363 回答
11 
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!');
            }

        }

    }]

});
于 2012-08-19T09:02:52.233 回答
5

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

}
于 2011-04-30T16:01:32.577 回答
3 
var selectednode = tree.getSelectionModel().getSelectedNode();

                //alert(selectednode);
                if(selectednode!=tree.getRootNode())
                selectednode.remove();
于 2009-09-11T06:11:17.670 回答
3 
var nodesSelected = Ext.getCmp('foldersTree').getSelectionModel().selected.items;
if(nodesSelected.length > 0)
{
    var node = nodesSelected[0];
    console.log(node.internalId);
}

这是用于 ExtJS4 TreePanel

于 2011-11-25T11:19:16.667 回答
2

对于 ExtJS 4...

我在树面板中添加了以下侦听器：

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

其中 selected_node 是一个全局变量。可以将 append 和 remove 之类的函数与此记录变量一起使用，例如：

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

我已经为添加节点和删除节点创建了按钮，它们使用上述内容将节点附加和删除到所选节点。remove() 将删除选定的节点以及所有子节点！

您也可以随时使用（通过鼠标左键和右键单击进行选择）获取所选节点： var selected_node = Ext.getCmp('tree_id').getSelectionModel().getSelection()[0];

于 2011-07-04T13:15:02.127 回答
1

@史蒂夫

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

不会工作，使用

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

反而。

于 2010-12-22T18:06:01.077 回答
1

在 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()
于 2011-11-08T10:18:00.107 回答
1 
var myTree = Ext.getCmp('tree-panel');
var selectednode = myTree.selModel.selNode
于 2011-06-29T10:50:27.607 回答
0

简单的 ....

itemclick: function(view, record, item, index, e)
{
   alert(record.data.text);
}
于 2014-01-06T11:59:03.877 回答