Air Mobile App List displaying duplicate data on scroll

Report · Jul 10, 2013

Having a werid issue.

If I return a larger number of rows of data then what can be displayed to on screen

when I start to scroll through the list Data from record 1 is being duplicated on

the next display item on the scroll

Example 10 data records

1

2

3

4

displayed

start scrolll

5 is diplaying 1 data

6 may display 1 or 2 data

and so on

there are 10 records displayed in the list

but the information is incorrect.

Here is the code

protected function display_gas_pricesResult_resultHandler(event:ResultEvent):void

{

// TODO Auto-generated method stub

currentState='start_here';

this.list.dataProvider=null;

this.list.dataGroup.invalidateDisplayList();

label_waterway.text=this.BoaterObject.waterway;

var _itemRenderer:IFactory=this.list.itemRenderer;

this.list.itemRenderer=null;

this.list.itemRenderer=_itemRenderer;

this.list.dataProvider=TypeUtility.convertToCollection(display_gas_pricesResult.lastResult);

this.list.validateDisplayList();

}

<s:List id="list"

width="100%"

height="100%"

change="list_changeHandler(event)"

contentBackgroundAlpha="0"

pageScrollingEnabled="true"

borderVisible="true"

scrollSnappingMode="leadingEdge"

itemRenderer="renderers.ir_gas_prices">

<s:layout>

<s:VerticalLayout/>

</s:layout>

</s:List>

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

width="100%" color="#000000"

creationComplete="itemrenderer1_creationCompleteHandler(event)"

autoDrawBackground="false" contentBackgroundAlpha="0">

<s:layout>

<s:HorizontalLayout gap="1"

paddingBottom="5"

paddingLeft="5"

paddingRight="5"

paddingTop="5"

verticalAlign="middle"/>

</s:layout>

<fx:Script>

<![CDATA[

import mx.events.FlexEvent;

protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void

{

if (data.gas_price_id == '0')

{

currentState='no_prices';

}

else

{

currentState='show_price';

label_name.text=data.name;

label_status.text=data.status;

label_gas.text=data.gas_price;

label_diesel.text=data.diesel_price;

label_date.text=data.date;

label_boatname.text=data.boat_name;

}

]]>

</fx:Script>

<s:states>

<s:State name="show_price"/>

<s:State name="no_prices"/>

</s:states>

<s:BorderContainer width.show_price="100%" height.show_price="100%" cornerRadius.show_price="10"

dropShadowVisible.show_price="true">

<s:layout.show_price>

<s:HorizontalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>

</s:layout.show_price>

<s:VGroup width="15%"

horizontalAlign="center">

<s:Image width="56"

height="46"

source="@embed('assets/basic1-088.png')"/>

<s:Label id="label_status" includeIn="show_price" width="100%" color="#662100" fontSize="18"

text="Label" textAlign="center"/>

</s:VGroup>

<s:VGroup width="100%"

gap="1">

<s:HGroup width="100%">

<s:Label id="label_name" includeIn="show_price" width="100%" color="#662100"

fontSize="20" fontWeight="bold" text="Label"/>

<s:Label includeIn="no_prices"

fontSize="16"

text="Sorry no one has posted any fuel prices yet.Be the first to post fuel prices on this water way.Click the add button "/>

</s:HGroup>

<s:HGroup includeIn="show_price"

width="100%"

horizontalAlign="left"

paddingLeft="20">

<s:VGroup gap="1"

horizontalAlign="center"

verticalAlign="top">

<s:Label fontSize="18"

fontWeight="bold"

text="Gas"/>

<s:HGroup width="100%">

<s:Label fontFamily="_typewriter"

fontSize="24"

fontWeight="bold"

text="$"/>

<s:Label id="label_gas"

color="#FF0303"

fontFamily="_typewriter"

fontSize="24"

fontWeight="bold"

text="Label"/>

</s:HGroup>

</s:VGroup>

<s:VGroup gap="1"

horizontalAlign="center"

verticalAlign="top">

<s:Label fontSize="18"

fontWeight="bold"

text="Diesel"/>

<s:HGroup width="100%">

<s:Label fontFamily="_typewriter"

fontSize="24"

fontWeight="bold"

text="$"/>

<s:Label id="label_diesel"

color="#00CA26"

fontFamily="_typewriter"

fontSize="24"

fontWeight="bold"

text="Label"/>

</s:HGroup>

</s:VGroup>

<s:Spacer width="20%"

height="10"/>

<s:VGroup width="50%"

gap="1"

horizontalAlign="right">

<s:Label id="label_date"

width="100%"

fontSize="16"

text="Label"

textAlign="right"/>

<s:HGroup width="100%"

horizontalAlign="right">

<s:Label fontSize="16"

fontWeight="bold"

text="By:"/>

<s:Label id="label_boatname"

fontSize="16"

text="Label"/>

</s:HGroup>

</s:VGroup>

</s:HGroup>

</s:VGroup>

</s:BorderContainer>

</s:ItemRenderer>

Report · Jul 16, 2013

Hi

It seem's to be a common issue of ghosting itemrender.

In flex item renderer is reused to keep memory performance.

You can try this fix

1- you can fix it by turning the "virtual layout" property of the llist to false;

But it will decrease the performance, because you turn off the behavior of reusing item renderer

2- you can override the "set data(data:object)" function of your item renderer class and move the "field=data" assignement inside it.

3- Or you can use a dataChange event handling function instead of the creationComplete.

I hope it's help you

Adobe Community

Air Mobile App List displaying duplicate data on scroll