Question

I’m using a spark combobox (which I really like). What I’d like to do is to allow users to delete elements from the cb list. To do this, I thought I’d add a delete button next to each cb element, by using a custom (and extremely simple) itemRenderer.

All seemed ok – I can get a button to show up, and the button seems interactive (i.e. if you hover over it its color definitely changes). However, I can’t seem to get any event to fire when I click on the button. I looked through the component’s code but was not illuminated by any genius thought. I was wondering if anyone knows how to get the button to shoot (I can take it from there…). Here’s some sample code to explain what’s going on…

thank you all!

---

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Declarations>
        <s:ArrayList id="dp">
            <fx:Object description="aaaa" />
            <fx:Object description="bbbb" />
            <fx:Object description="cccc" />
            <fx:Object description="dddd" />
        </s:ArrayList>
    </fx:Declarations>

    <s:ComboBox id="cb" width="200" x="20" y="20"
                dataProvider="{dp}" labelField="description"
                itemRenderer="ComboBoxItemRenderer.symbolComboBoxRenderer"/>

</s:Application>

and the item renderer (note: i tried both capture phase on and off, but no luck. Also I tried higher priority, but no luck there either).

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx" width="100%"
                creationComplete="itemrenderer1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.utils.StringUtil;

            import spark.components.ComboBox;

            override public function set data(value:Object):void  
            {
                super.data = value;
            }

            protected function button1_clickHandler(event:MouseEvent):void
            {
                trace("pressed button");
            }

            protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
            {
                bt.addEventListener(MouseEvent.CLICK, button1_clickHandler, true, 50);
            }

        ]]>
    </fx:Script>

    <s:HGroup width="100%">
        <s:Label id="labelDisplay" left="1" top="5" bottom="5" width="100%"/>
        <s:Button id="bt" width="7" height="7"/>
    </s:HGroup>
</s:ItemRenderer>

Answer 1

ok, figured it out – overriding item_mouseDownHandler and checking for the target type seems to do the trick.