EXTJS：如何在樹面板的“圖標”節點上添加單擊事件

Question

我嘗試讓事件單擊樹面板中的節點圖標。

我有一棵有許多節點的樹，在葉節點的前面，有一個圖標。 目前，當我單擊一個節點時，將顯示一個PDF文件。

當我單擊該節點的圖標時，我想執行特定的操作。

有人對此有想法嗎？

非常感謝您的未來答案！

編輯：感謝您的回答，

@Hown_：好的，但是我必須根據選擇節點執行特定的操作。 使用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

我認為您無法使用節點前面的圖標來執行此操作（也許我錯了）。

但是我通常通過使用帶有兩列的treepanel解決這種用例：

• 一個樹柱
• 動作欄就像這個例子在這里 。

訣竅是在樹面板上使用config屬性'hideHeaders：true'使其看起來像經典樹。

Answer 3

您可以通過css選擇器選擇圖標的dom元素，並在render方法之后添加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()

    });
});