View Full Version : Need Help creating a button with Close icon

30 May 2013, 11:06 PM
I need to create a closable Ext.button..Any help on how i could achieve this ?? I heard Template is one,but how??The requirement is such that the button and the handler concept should be the same,which means i have two clickable elements in the same button..:((

Thanks in advance,

31 May 2013, 2:19 AM
I'm not sure I understand the request?

Could you clarify?

31 May 2013, 2:41 AM
Okay here's what...I need to create an Ext.Button which has a closable option.i.e On the right top of the button i have to display the 'X' icon for which there would be custom handlers.

Just like the Android apps scrren where u get the red X when u long press an app

1 Jun 2013, 1:23 AM
Still stuck!!!Tried adding the close button as a div to the dom element using DOMHelper.append invain..:( Any help is greatly appreciated

1 Jun 2013, 2:02 AM
I'm not at my computer, but this shouldn't be too difficult.

You could hook into the button's render event, grab the button element, then use some element methods such as appendTo or appendChild to add the div/code to create the close icon (check the 3.4 API docs for "element" > "Methods"). Then during the button handler function, you would just have to check what the click target is (button or close icon), and handle accordingly.

If you're still having problems later give a shout and I'll see if I can rustle up a demo.

3 Jun 2013, 10:57 AM
Willi thanks a lot for that... Could off implemented that.. Ended up creating an ext panel with a custom template which had a div and the close button.. Did that for me.. Could you just help me with the api that lets us check for the target element being clicked?is it the click event of the El you are talking about? In My case as explained above I have two divs one for the button and the other for the close.. On clicking the wrapper element here would I get the element being clicked as a default argument.? Or is it something else :-?

3 Jun 2013, 12:57 PM
If you're now just creating a click listener on an EXT Element, then you should already have the target returned to you as one of the parameters:


S (http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Element-event-click)o for example, if you did the following:

.on('click', function(event, target, options) {
console.log(event, target, options)

...then the target should be the lowest child element clicked. Therefore if you have a child div inside a parent div (I assume with identifying classes / IDs), you should be able to detect which div has been clicked by interrogating the target parameter.

Again, unfortunately I'm not in front of my computer - but I can once again knock up a quick demo on JSFiddle if you get stuck :)

Hope this helps.

4 Jun 2013, 6:57 PM
Thanks a lot mate.. That did help.. I had placed the image inside the div in my custom template.. The image was to be displayed on hover of this element.. El. Hover did it for me.. Then had to create an element around my image for which I did apply your click logic.. Works like a dream after I did evt.Stoppropogation.. Thanks a lot

Sonia Jain
24 Jan 2014, 11:00 AM
Can you please provide with the code you wrote for this implementation?