CODEWITHSUNDEEP
extjs
bharath
bharath

Reputation: 121

How to attach an On Click event for Icon In Ext.js

I Have an Ext.js Container with an header , header contains a text as its title and an icon . Used to refresh the tab . How can i get icon click event for that container header ? Ive used icon: '@Url.Content("~/Images/icon-supp.png")', for getting the icon next to the text. Here is my code:

'TabChange' also activates only when tab is changed and not while clicked on icon.

More information : I have an center container . Im adding an Ext.tab.Panel to it , which has 

 items: [ 
            {
                                xtype: 'container',
                                title: 'FooText',
                                id: 'FooPanel',
                                icon: '@Url.Content("~/Images/icon-refresh.png")',
  tools: [{
                        type: 'help',
                        handler: function(){
                            //Doesnt hit on click of tab
                        }
                    }, {
                        itemId: 'refresh',
                        type: 'refresh',
                        hidden: true,
                        handler: function(){
                            //Doesnt hit on click of tab
                        }
                    }
                    }],
                                listeners: {
                                    activate: function () {
                                       //This just hits only once when that tab gets activated./
                                        alert('you clicked me');
                                    },
                                    click:function(){//Doesnt work},
                                        },
                                    handler:function(){//Doesnt work},

                                autoScroll: true,

                            },

Now all i need is a handel event on click of image icon. Is it possible ?

Upvotes: 1

Views: 2869

Answers (2)

bharath
bharath

Reputation: 121

Finally I went on using an html image button on the title and handling the onClick event.As such

title: 'fooTitle <input type="image" style="float: right;padding-left:10px; height: 15px;width:30px; " src="Images/icon-refresh.png" onclick="refreshFooTab()"></input>',

function refreshFooTab()
{...}

Upvotes: 1

LellisMoon
LellisMoon

Reputation: 5020

If the problem is to refresh the tab clicking on an icon, do you know about the tools?

tools:

An array of Ext.panel.Tool configs/instances to be added to the header tool area. The tools are stored as child components of the header container. They can be accessed using down and {query}, as well as the other component methods. The toggle tool is automatically created if collapsible is set to true.

Note that, apart from the toggle tool which is provided when a panel is collapsible, these tools only provide the visual button. Any required functionality must be provided by adding handlers that implement the necessary behavior.

Example usage:

tools:[{
    type:'refresh',
    tooltip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panelHeader) {
        // refresh logic
    }
},
{
    type:'help',
    tooltip: 'Get Help',
    callback: function(panel, tool, event) {
        // show help here
    }
}]

obviously using these tools, that already have listeners, you can set css to them and make the tool like as you want.

More informations here: https://docs.sencha.com/extjs/5.1/5.1.2-apidocs/#!/api/Ext.panel.Panel-cfg-tools

Upvotes: 0

Related Questions