4 Replies Latest reply on Apr 1, 2010 2:07 PM by tw12lveam

    Custom ItemRenderer and event Bubbling


      I'm targeting Flex 4 on Air 2, but I don't think that changes the answer to this question.


      I have a Spark DropDownList which I've written a custom itemRenderer for. In my item renderer I have a spark.button. I have event bindings in the mxml and the target functions in respective classes, and I'm listening for the dropdownlist change event along with my itemrenderer.spark.button click event.


      My problem is that I can't seem to get any event in my item renderer to fire. It's like when I'm clicking the button, it fires the dropdownlist.change event and destroys the itemrenderer before it can handle the click event. So I thought maybe I could fix this by adding listeners in AS instead of using the mxml binding but same problem. Finally, I just put a trace in the mxml click event and nothing. It's not dealing with the item in the list before getting rid of the list.


      So, simply, how do I capture the itemRenderer events before allowing the DropDownList change event? Or why does the click go through the button and cause the dropdownlist to be destroyed?

        • 1. Re: Custom ItemRenderer and event Bubbling
          Flex harUI Adobe Employee

          Your click handler probably runs after the List's click handler.  You can

          try using a higher priority for your click handler.

          • 2. Re: Custom ItemRenderer and event Bubbling
            tw12lveam Level 1

            Yeah, that's the problem. I can't use the priority because the events are not attached to the same listener.


            The DropDownList's itemRenderer is created when you click the dropdownlist button and destroyed when you select an item or click off the list.


            My main problem is that it seems to trigger the change event on the dropdownlist *through* the button. In other words, the button seems to be under whererever the hitarea is on the dropdownlist. Has anyone ever had actionable items on a dropdownlist before? I read about having editable fields inside an item renderer, but it seems in flex for you can't toggle that an item renderer is editable? Is it because I'm using a dropdownlist that you can't have interactive elements in the itemrenderer?

            • 3. Re: Custom ItemRenderer and event Bubbling
              Flex harUI Adobe Employee

              It looks like DropDownList uses MOUSE_DOWN and not CLICK which is why it

              closes the dropdown before you get your click.


              I saw a hitAreaAdditions property you might be able to access to block areas

              from closing the dropdown, but you might just want to respond to MOUSE_DOWN

              and stopPropagation on the event.

              • 4. Re: Custom ItemRenderer and event Bubbling
                tw12lveam Level 1

                While the mouse down event on the actual drop down list wasn't the answer (mouse down seems to fire only when you click on the dropdownlist

                button, not the list itself.. although, maybe I have to bind to the list that shows up but I don't know what that is since the dropdownlist component creates it on mouse down.. I assume I'd have to extend the dropdownlist component and re-write that functionality) I changed my custom itemRenderer's button to listen for mouse down instead of click, which does fire before the list is destroyed.


                Confusing, but it works. Thanks for the tip!