EXTJS: как добавить событие щелчка на узле значка на панели дерева

Я предполагаю, что самым простым способом было бы добавить событие itemclick к вашему TreePanel и проверить в обработчике fn, был ли нажат значок дерева, проверив цель события. Это работает так просто:

Возможно, вам придется изменить селектор css getTarget fn для вашего конкретного использования. (например, только листовые элементы или значки 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');
                }
            }
        }

    });
});

Я не думаю, что вы можете сделать это со значком перед узлом (может быть, я ошибаюсь).

Но я обычно решаю такой вариант использования, используя древовидную панель с двумя столбцами:

• деревоколонна
• столбец действий, как в этом примере здесь.

Хитрость заключается в использовании свойства конфигурации «hideHeaders:true» на панели дерева, чтобы оно выглядело как классическое дерево.

Вы можете выбрать элементы dom значков с помощью селектора css и добавить событие клика после метода рендеринга.

вот пример: 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()

    });
});