Flash Builder 4.6 - List control has ItemRenderer with text box - scrolling of list makes txt box values show all over

Question

I have a list control, and an item renderer. Within the item renderer, I have a text box for the quantity that the person wants of each item. On each qty update (focus in an focus out events on the text box), I am updating the values for the data. In the main program I show totals based on this.

The totalling code works correctly, however when I scroll the list the values show up all over the page. Attached is a screenshot of the values all jumbled up after a simple scroll down. Also, below is the complete item renderer. I have found alot of notes on the web about this but everything I try doesn't help!

Here is a link to the picture of the problem: Scrolling Error

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer name="PlowResultsRenderer"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx" >


<fx:Script>
  <![CDATA[
   import spark.events.TextOperationEvent;
   import flash.events.EventDispatcher;
   import valueObjects.Tag;
   import valueObjects.TagProjectItem;
   import classes.QtyChangeEvent; 

   [Bindable]
   public var lineQty:Number;
   [Bindable]
   public var lineList:Number;
   [Bindable]
   public var lineDealerCost:Number;

   public var textPlaceholder:String = "0";


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

    var thisItem:TagProjectItem = data as TagProjectItem;

    if (thisItem.IsOnHand || thisItem.IsOnOrder)
    {
     currentState = "green";
    }else if (thisItem.IsOnDealerFloorplan)
    {
     currentState = "white";
    }else
    {
     currentState = "red";
    }
    //  #EEA2AD  old red

    lineList = Number(thisItem.ListPrice);
    lineDealerCost = Number(thisItem.DealerCost);
    lineQty = 0;



    validateNow();
   }


   /*protected function dataChangeHandler(evt:Event):void {

    var  thisItem:TagProjectItem = data as TagProjectItem;

    if (thisItem.IsOnHand || thisItem.IsOnOrder)
    {
     currentState = "green";
    }else if (thisItem.IsOnDealerFloorplan)
    {
     currentState = "white";
    }else
    {
     currentState = "red";
    }
    //  #EEA2AD  old red

    lblModelNumber.text = thisItem.ModelNumber;

    //lblListPrice.text = America.format(thisItem.ListPrice);
    lblListPrice.text = America.format(thisItem.PromoPrice);

    lblSWDescription.text = thisItem.SWDescription;
    lblSWCategory.text = thisItem.SWCategory;

    lineList = Number(thisItem.ListPrice);
    lineDealerCost = Number(thisItem.DealerCost);
    lineQty = 0;

    validateNow();
   }*/




   protected function doFocusIn(event:FocusEvent):void
   {

    textPlaceholder = txtQty.text;
    if (textPlaceholder == "0"){
     txtQty.text = "1";
    }
   }

   protected function doFocusOut(event:FocusEvent):void
   {

    if (txtQty.text != textPlaceholder){
     //here the text has been changed.
     var changeEvent:QtyChangeEvent = new QtyChangeEvent(QtyChangeEvent.CHANGE, Number(txtQty.text) - Number(textPlaceholder), lineDealerCost, lineList);
     parent.dispatchEvent(changeEvent);
    }
    textPlaceholder = "0";
    if (txtQty.text == ""){
     txtQty.text = "0";
    }
   }

  ]]>
</fx:Script>
<fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
  <mx:CurrencyFormatter id="America" precision="2" 
         rounding="none"
         decimalSeparatorTo="."
         thousandsSeparatorTo=","
         useThousandsSeparator="true"
         useNegativeSign="true"
         currencySymbol=""
         alignSymbol="left"/>
</fx:Declarations>
<s:states>
  <s:State name="green" />
  <s:State name="white" />
  <s:State name="red" />
</s:states>
<s:layout>
  <s:HorizontalLayout gap="0"
       paddingTop="1" paddingBottom="1"
       verticalAlign="middle" />
</s:layout>
<s:Panel skinClass="PanelNoTitleBar" horizontalCenter="0" width="100%">
  <s:Rect id="rect" width="100%">
   <s:fill>
    <s:SolidColor color.green="#C1FFC1" color.red="#FFC1C1" color.white="#FFEC8B">
    </s:SolidColor>
   </s:fill>
  </s:Rect>
  <s:HGroup width="100%">
   <s:VGroup>
    <s:Label text="Qty" paddingLeft="2" paddingRight="8" paddingTop="4" paddingBottom="1" >
    </s:Label>
    <s:TextInput id="txtQty" width="34" height="30"
        fontSize="11" maxChars="3" restrict="0-9" softKeyboardType="number"
        widthInChars="3" text="{lineQty}"
        focusIn="doFocusIn(event)" focusOut="doFocusOut(event)">
    </s:TextInput>
   </s:VGroup>
   <s:VGroup width="100%">
    <s:HGroup width="100%">
     <s:Label id="lblModelNumber" text="{data.ModelNumber}" paddingLeft="2" paddingRight="2" paddingTop="4" paddingBottom="1"  />
     <s:Spacer width="100%">
     </s:Spacer>
     <s:Label text="List Price: " paddingLeft="2" paddingRight="8" paddingTop="4" paddingBottom="1" />
     <s:Label id="lblListPrice" text="{America.format(data.PromoPrice)}" textAlign="right" fontWeight="bold" paddingLeft="2" paddingRight="8" paddingTop="4" paddingBottom="1"   />
    </s:HGroup>
    <s:Label id="lblSWCategory" text="{data.SWCategory}" paddingLeft="11" paddingRight="2" paddingTop="1" paddingBottom="1" />
    <s:Label id="lblSWDescription" text="{data.SWDescription}" paddingLeft="11" paddingRight="2" paddingTop="1" paddingBottom="4"  textAlign="right" /> 
   </s:VGroup>
  </s:HGroup>
</s:Panel>


</s:ItemRenderer>

Answer 1

Is this an iOS application? If so, there is a bug with the scrolling of native text controls. The following should fix it:

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace local "*";
        s|TextInput {
            skinClass: ClassReference("spark.skins.mobile.TextInputSkin");
        }
        s|TextArea {
            skinClass: ClassReference("spark.skins.mobile.TextAreaSkin");
        }
    </fx:Style>