Question

我尝试在树状面板中点击节点的图标来点击事件。

我有一个有许多节点的树，在叶节点前面，我有一个Icon。目前，当我点击一个节点时，我会显示一个PDF文件。

我想点击此节点的图标时执行特定操作。

有人有这样做的想法吗？

非常感谢你的未来答案！

编辑：谢谢你的回答，

@Hown_：好的，但我必须做一个特定的操作，这取决于select节点。使用CSS选择器，我无法做到这一点。我错了吗？

@budgw：是的，这是一个很好的解决方案，但我的图标必须位于文本节点的前面：（

Answer 1

我想最简单的方法是将itemclick事件添加到TreePanel并通过检查事件的目标来检查处理程序fn是否单击了树图标。它的工作原理很简单：

您可能需要更改getTarget fn的css选择器以供特定用途使用。（例如，只有叶子元素或pdf图标或类似的东西）

Ext.onReady(function() {
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [{
                text: "detention",
                leaf: true
            }, {
                text: "homework",
                expanded: true,
                children: [{
                    text: "book report",
                    leaf: true
                }, {
                    text: "alegrbra",
                    leaf: true
                }]
            }, {
                text: "buy lottery tickets",
                leaf: true
            }]
        }
    });    

    Ext.create('Ext.tree.Panel', {
        title: 'Simple Tree',
        width: 200,
        store: store,
        rootVisible: false,
        renderTo: Ext.getBody(),

        listeners: {
            itemclick: function(treeModel, record, item, index, e, eOpts){
                var iconElClicked = e.getTarget('.x-tree-icon');

                if(iconElClicked){
                    //tree icon clicked 

                    //do something in here
                    console.log('tree icon clicked');
                }
            }
        }

    });
});

Answer 2

我认为你不能用节点前面的图标做到这一点（也许我错了）。

但我通常使用带有2列的treepanel来解决这种用例：

一个树柱
此示例中的操作列here。

诀窍是在树面板上使用config属性“hideHeaders：true”使其看起来像一个经典树。

Answer 3

您可以通过css选择器选择图标的dom元素，并在渲染方法后添加一个click事件。

这是一个例子： https://fiddle.sencha.com/#fiddle/8kd

<强>更新

〔实施例：

Ext.onReady(function() {
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [{
                text: "detention",
                leaf: true
            }, {
                text: "homework",
                expanded: true,
                children: [{
                    text: "book report",
                    leaf: true
                }, {
                    text: "alegrbra",
                    leaf: true
                }]
            }, {
                text: "buy lottery tickets",
                leaf: true
            }]
        }
    });

    Ext.define('MyPanel', {
        extend: 'Ext.tree.Panel',
        title: 'Simple Tree',
        width: 200,

        onTreeIconClick: function(treeModel, record, item, index, e, eOpts){
            // DO SOMETHING IN HERE    
            console.log('onTreeIconClicked');
        },

        render: function(){                
            this.callParent(arguments);

            var domEls = this.el.dom.querySelectorAll('#' + this.getId() + ' .x-tree-icon', this.el.dom);

            for(var i = 0; i<domEls.length; i++){
                Ext.get(domEls[i]).on('click', function(){                    
                    //click on tree icon

                    this.on('itemclick', this.onTreeIconClick, this, { single: true });                                                     

                }, this);
            }           

        }
    });


    Ext.create('MyPanel', {

        store: store,
        rootVisible: false,
        renderTo: Ext.getBody()

    });
});

EXTJS：如何在树面板中的Icon节点上添加单击事件

3 个答案: