EXTJS: How can I add an click event on Icon node in a Tree Panel

Question

I try to get an event click on the node's Icon in a tree panel.

I have a tree with many node and in front of the leaf node, I have an Icon. For the moment, when I click on a node I display a PDF file.

I want to do a specific action when I click on the Icon of this node.

Someone have an idea for do that?

Thanks a lot for your futur answers!

EDIT: Thanks for your answer,

@Hown_: Ok, but I must do an specific action which depends to the select node. With a CSS selector, I can't do that. I'm wrong?

@budgw: Yes, it's a good solution, but my icon must be in front of the text node :(

Answer 1

I guess the simplest way would be to add itemclick event to your TreePanel and check in the handler fn if the tree icon was clicked by checking the target of the event. It works as simple as this:

You may have to change the css selector of the getTarget fn for your specific use. ( e.g. only leaf elements or pdf icons or something like that )

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');
                }
            }
        }

    });
});