Two way databinding for combobox's selectedItem is not working via @ symbol in Adobe Flex 4

Question

I need to enable two way data binding in combobox’s selectedItem and a valueobject’s one of the field. I am using @{variable name} construct.

It works one way - when valueobject’s field is changed, combobox’s selectedItem is getting updated. But reverse is not working unless I handle combobox’s change event explicitly. Is there any reason for @ not working as per expectation.

In below code snippet, I am trying to bind OrderInfo.billingName to combo1.selectedItem.

1st use case : OrderInfo.billingName’s initial value is getting set to combo1.selectedItem

2nd use case: In case OrderInfo.billingName value is changed in between, then also combo1.selectedItem is getting updated

3rd use case : When user select some value from combo1, it is not getting assigned to OrderInfo.billingName unless I handle change event.

[Bindable]

public class OrderInfo {

        public var billingName:String ; //This field is bindable to combo1’s selectedItem
        public var billingAddress:String;
        public var billingCity:String;
        public var billingState:String;
        public var billingZip:String;
        public var cardType:String;
        public var cardNumber:String;
        public var cardExpirationMonth:String;
        public var cardExpirationYear:String;
        public var deliveryDate:Date;

        public function OrderInfo() {
        }
        public function toString ():String {
              return "I am OrderInfo : " + this.billingName + this.billingCity;
        }
  }

<?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"
                 initialize="application1_initializeHandler(event)">
  <fx:Script>
        <![CDATA[
              import mx.binding.utils.BindingUtils;
              import mx.collections.ArrayCollection;
              import mx.controls.Alert;
              import mx.events.FlexEvent;
              import mx.events.IndexChangedEvent;
              import mx.utils.ObjectUtil;

              import spark.events.IndexChangeEvent;
              [Bindable]
              public var dp:ArrayCollection = new ArrayCollection (
                    [     {Id:'one', Amount:1000},
                          {Id:'two', Amount:2000},
                          {Id:'three', Amount:3000}
                    ]
              );
              [Bindable]
              public var orderInfo:OrderInfo = new OrderInfo();
              protected function application1_initializeHandler(event:FlexEvent):void
              {
                    //Initial value of the field .. this could be coming via database
                    orderInfo.billingName = 'one';
              }


              protected function combo1_changeHandler(event:IndexChangeEvent):void
              {
                    orderInfo.billingName = (((event.currentTarget as 
                    ComboBox).selectedItem as Object).Id); //??
              }

              protected function button1_clickHandler(event:Event):void
              {
                    mx.controls.Alert.show(ObjectUtil.toString(orderInfo));
              }

              protected function button2_clickHandler(event:Event):void
              {
                    // Some backend process changed the value object
                    orderInfo.billingName = 'three';
              }
        ]]>
  </fx:Script>

  <s:ComboBox id="combo1" x="81" y="65"
                    dataProvider="{dp}"
                    labelField="Id"
                    selectedItem="@{orderInfo.billingName}"
                    change="combo1_changeHandler(event)"
                    />

  <s:Button label="Get OrderInfo Object Snapshot" click="button1_clickHandler(event)" 
   x="273" y="176"/>
  <s:Button label="Change OrderInfo Object" click="button2_clickHandler(event)" 
   x="52"    y="176"/>

score 0 · Answer 1 · edited Jul 23 '13 at 08:38

I am also looking into getting this functionality working. I believe the issue lies in what is being bound. The selectedItem property expects an object of type * which means an item from the arrayCollection that it's bound with. So try passing one or these objects

({Id:'one', Amount:1000},{Id:'two', Amount:2000},{Id:'three', Amount:3000})

to the selectedItem property instead of a string.

Two way databinding for combobox's selectedItem is not working via @ symbol in Adobe Flex 4

1 Answers1