1 Reply Latest reply on Jan 15, 2013 3:48 PM by Flex harUI

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

    MrJesse3434

      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!  

       

       

      scrollingerror.jpg

       

       

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