Results 1 to 9 of 9

Thread: Need Help creating a button with Close icon

  1. #1

    Default Need Help creating a button with Close icon

    Hi,
    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,
    Siddharth

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    I'm not sure I understand the request?

    Could you clarify?

  3. #3

    Default

    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

  4. #4

    Default

    Still stuck!!!Tried adding the close button as a div to the dom element using DOMHelper.append invain.. Any help is greatly appreciated

  5. #5
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    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.

  6. #6

    Default

    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

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    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:

    http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Element-event-click

    S
    o for example, if you did the following:
    Code:
    .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.

  8. #8

    Default

    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

  9. #9

    Default

    Can you please provide with the code you wrote for this implementation?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •