EXTJS：如何在树面板的“图标”节点上添加单击事件

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

    });
});

Answer 2

I don't think you can do that with the icon in front of the node (maybe I'm wrong).

But I usually solve this kind of use case by using a treepanel with 2 columns :

• a treecolumn
• an action column like in this example here .

The trick is to use the config property 'hideHeaders:true' on the tree panel to make it looks like a classic tree.

Answer 3

You can select the dom elements of the icons via css selector and add a click event after the render method.

here is an example: https://fiddle.sencha.com/#fiddle/8kd

UPDATE:

exmaple:

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()

    });
});