2 Replies Latest reply on Sep 27, 2011 9:37 PM by rabinprithvi

    ComboBox Behaviour ???

    rabinprithvi Level 2

      Hi,

       

      I am using Flash Builder 4.0.

       

      I am confused about the behaviour of combobox when an item is deleted in the dataprovider.

       

      Following is the user interaction

       

      Step1: User enters a name in the texfield

       

      Step2 : User Clicks a button

       

      Step3. Name is added to combobox using  ArrayCollection as data provider (Use item renderer to display delete button for every item)

       

      Step4. Repeat the above steps three times to populate three items in the combobox

       

      Step5: Select the second item.

       

      Step6 : Open the combobox and delete the first item

       

      Step7: Now the selected item is the third item !!!!...... not the second item which was selected in Step 5.

       

      How the last item gets selected ?

       

      I think that flex does not bother about which is previously selected item, it goes ahead and selects the previously selected index.

       

      Am I Correct?

       

      If so, what is the work around ???

       

      ______________________________

       

      Thanks for your time.

       

      Rabin.

       

       

      Here is the code for the 3 files I used for prototype.

       

      Main Application.mxml

       

      <?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"

                                       creationComplete="application1_creationCompleteHandler(event)">

       

                <fx:Script>

                          <![CDATA[

                                    import events.UserReportFilterDeleteEvent;

       

                                    import mx.collections.ArrayCollection;

                                    import mx.controls.Alert;

                                    import mx.core.FlexGlobals;

                                    import mx.events.FlexEvent;

                                    import mx.utils.object_proxy;

       

                                    import spark.events.IndexChangeEvent;

       

                                    [Bindable]

                                    private var ac:ArrayCollection = new ArrayCollection();

                                    private var previousObject:Object;

       

       

       

                                    protected function button1_clickHandler(event:MouseEvent):void

                                    {

                                              ac.addItem(ti.text);

                                    }

       

                                    protected function application1_creationCompleteHandler(event:FlexEvent):void

                                    {

                                              FlexGlobals.topLevelApplication.addEventListener(UserReportFilterDele teEvent.FILTER_DELETED,deletedHandler);

                                    }

       

                                    private function deletedHandler(e:UserReportFilterDeleteEvent):void

                                    {

                                              var object:Object = e.data;

                                              ac.removeItemAt(ac.getItemIndex(object));

       

                                    }

       

                          ]]>

                </fx:Script>

       

                <s:layout>

                          <s:HorizontalLayout/>

                </s:layout>

       

                <s:TextInput id="ti"/>

                <s:Button label="Add" click="button1_clickHandler(event)"/>

                <s:ComboBox id="cb" dataProvider="{ac}" itemRenderer="renderers.FilterRenderer" />

       

      </s:Application>

       

       

      FilterRenderer.mxml

       

      <?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"

                                              autoDrawBackground="true">

       

                <s:layout>

                          <s:HorizontalLayout/>

                </s:layout>

       

       

       

       

                <fx:Script>

                          <![CDATA[

                                    import events.UserReportFilterDeleteEvent;

       

                                    import mx.core.FlexGlobals;

                                    protected function button1_mouseDownHandler(event:MouseEvent):void

                                    {

                                              var deleteEvent:UserReportFilterDeleteEvent = new UserReportFilterDeleteEvent(UserReportFilterDeleteEvent.FILTER_DELETED,data);

                                              FlexGlobals.topLevelApplication.dispatchEvent(deleteEvent);

       

                                    }

                          ]]>

                </fx:Script>

       

                <s:Label text="{data}"/>

                <s:Button label="X" width="28" mouseDown="button1_mouseDownHandler(event)"/>

       

      </s:ItemRenderer>

       

       

      UserReportFilterDeleteEvent.as

       

      package events

      {

                import flash.events.Event;

       

                public class UserReportFilterDeleteEvent extends Event

                {

                          public static const FILTER_DELETED:String = "filterDeletedUserReportFilterDeleteEvent";

                          public var data:Object;

       

                          public function UserReportFilterDeleteEvent(type:String,data:Object, bubbles:Boolean=true, cancelable:Boolean=false)

                          {

                                    this.data = data;

                                    super(type, bubbles, cancelable);

                          }

       

                          override public function clone():Event

                          {

                                    return new UserReportFilterDeleteEvent(UserReportFilterDeleteEvent.FILTER_DELETED,data,bubbles,cance lable);

                          }

                }

      }