如何在 ExtJS 4 中的树节点上设置 singleClickExpand

Question

在 ExtJS 树上展开节点的默认操作是双击。

在版本 4 之前，TreeNode 配置中有 singleClickExpand 属性。

如何在 ExtJS 版本 4 树上应用 singleClickExpand 行为？

是否有此行为的配置属性而不设置事件侦听器？

谢谢。

Answer 1

我花了一些时间寻找同样的东西。我觉得我可以明确地回答你的问题...
不，没有它的配置选项。
我必须设置一个点击处理程序。无论如何，我需要一个来实现叶子点击的功能：

var tree = Ext.create('Ext.tree.Panel', {
    store: store,
    rootVisible: false,
    lines: false,
    useArrows: true,
    listeners: {
        itemclick: function(view, node) {
            if(node.isLeaf()) {
                // some functionality to open the leaf(document) in a tabpanel
            } else if(node.isExpanded()) {
                node.collapse();
            } else {
                node.expand();
            }
        }
    }
});

Answer 2

事实上，您使用了树视图的展开功能。

只需在树面板上实现 itemclick 函数即可：

listeners: {
    itemclick: function (treeview, record, item, index, e, eOpts) {
        treeview.expand(record);
    }
}

Answer 3

如果您使用键盘导航，您可能需要使用 SelectionChange 事件，以便涵盖所有场景，但无论如何，这是我在我的案例中使用的一种方法来实现 singleClick 功能。

在树中定义一个新事件，例如假设您定义了一个从树面板继承的类，那么在“initComponent”中您将创建该事件：

Ext.define('MY.view.CheckList', {
扩展：'Ext.tree.Panel',
别名: 'widget.checklist',

store: 'CheckPoints',
useArrows: true,

initComponent: function () {

    this.callParent(arguments);     
    this.on("selectionchange", this.onSelectionChange);
    this.addEvents({
        singleClick: true 
    });
},

onSelectionChange: function(model, nodes){

    [....]

    // fire statusUpdated event
    this.fireEvent("singleClick", this, model, nodes);
}

});

那么你需要监听你创建的事件，例如：

var mytree = Ext.create("MY.view.CheckList");

mytree.on("singleClick", function( tree, model, Nodes){

console.log(">>>>>>>>>>>>>>>>>>>>> EVENT TRIGGERED <<<<<<<<<<<<<<<<<<<<<<<<");
console.log( tree, model, nodes);
var currSelPath = nodes[0].getPath();

//This will expand the node at the path you just clicked
tree.expandPath(currSelPath);

});

两件事：

• 你需要稍微调整它以适应你的代码场景
• Ofc 你可以直接监听“selectionChange”事件并执行此操作，但我认为从代码可重用性的角度来看，它更干净、更明显，如果你添加在触发事件“singleClick”之前进行更多的逻辑和检查，并想象如果您有更多从该基础树继承的树，则只需执行一次。

我确信这不是最完美的解决方案，但就我而言效果很好。

哈！