1 Reply Latest reply on Jul 16, 2013 10:53 PM by mushmut

    Air Mobile App List displaying duplicate data on scroll

    PopeOfHockey

      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.&#xd;Be the first to post fuel prices on this water way.&#xd;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>

        • 1. Re: Air Mobile App List displaying duplicate data on scroll
          mushmut Level 1

          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