Flex 4.6 Mobile Horizontal List: Reload itemRenderer

Question

I have one list which is having the layout set to horizontal display.

<s:List id="pagedList"
        width="100%" height="100%"
        verticalScrollPolicy="off" horizontalScrollPolicy="on"
        pageScrollingEnabled="true"
        itemRenderer="views.component.renderer.pageListItemRenderer"
        skinClass="views.component.skin.PagedListSkin"
        dataProvider="{acPages}"
        scrollSnappingMode="center"
        interactionMode="touch"
        useVirtualLayout="true">
            <s:layout>
                <s:TileLayout orientation="rows" requestedRowCount="1"
                              columnWidth="{pagedList.width}" rowHeight="{pagedList.height}" 
                              verticalGap="0" horizontalGap="0" />
                </s:layout>
</s:List>

The dataProvider for the list is

[Bindable]
private var acPages:ArrayCollection = 
    new ArrayCollection( [
        {status:"Approved", method:"findRange(0,10)"},
        {status:"Pending", method:"findRange(10,20)"},
        {status:"Draft", method:"findRange(20,30)"},
        {status:"Ready", method:"findRange(30,40)"},
        {status:"Cancelled", method:"findRange(40,50)"},
        {status:"Recommended", method:"findRange(50,60)"},
        {status:"Resubmitted", method:"findRange(60,70)"}
]);

And finally the itemRenderer

<fx:Script>
        <![CDATA[
override public function set data(value:Object):void 
            {
                super.data = value;

                if (value== null)
                    return;

                if (data.status)
                    mss.loadDgrid(data.method);
            }
    ]]>
    </fx:Script>

<s:Group width="100%" height="100%">
        <s:layout>
            <s:VerticalLayout gap="0" verticalAlign="middle" horizontalAlign="center" paddingBottom="30"/>
        </s:layout>
        <s:Group width="100%" contentBackgroundColor="0x000001">
            <s:layout>
                <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
            </s:layout>
            <s:Label fontWeight="bold" text="&lt;" paddingLeft="20"/>
            <s:Spacer width="100%"/>
            <s:Label fontWeight="bold" text="{data.status}"/>
            <s:Spacer width="100%"/>
            <s:Label fontWeight="bold" text="&gt;" paddingRight="20"/>
        </s:Group>

        <s:DataGrid id="dgTaskGrid"
                    width="100%" height="100%"
                    verticalScrollPolicy="on"
                    dataProvider="{mss.dataProvider}">
            <s:columns>
                <s:ArrayList>
                    <s:GridColumn headerText="Application ID" dataField="phId" />
                    <s:GridColumn headerText="Status" dataField="phAppStatus" />
                </s:ArrayList>
            </s:columns>
        </s:DataGrid>
    </s:Group>

What you can see is that the list will be displaying 7 pages based on the acPages ArrayCollection and user can swipe left-right on the list to get to the next/previous page. Each page will be having the DataGrid and should load their own respective content. For example, the Approved page will display their own data using the data.method assigned on acPages. The mss.loadDgrid will then send a HTTPRequest to the webservice and returns the result.

Currently, what is happening, the list will first display the Approved data correctly, once I swipe to the left to reveal the next page(Pending page), the page will render well with the required data. But when I swipe back to the previous page (Approved page), the DataGrid is displaying the data from the pending page. I was thinking that it should reload back but that is not the case. This apply to the rest of the pages.

I tried the useVirtualLayout set to false and true but seems nothing worked out. I also had overide the set Data function as well as listening to dataChange() of the itemRenderer but still it doesn't reload.

What I want now is on each swipe, the itemRenderer will refresh and gets the desired data.

I am a newbie on Flex, so could be the approach I used is wrong. Looking forward for your help.

Thanks, Jason

michael michael · Accepted Answer · 2012-07-12T17:14:22

This is the itemrenderer refresh issue. You may have a look on the following:

Invalidating a Spark List Component to Redraw All Item Renderers

What is the reason to put all the data in acPages arraycollection? Maybe, you can create 7 arraycollection to hold the data, and then assign it to acPages when it is necessary.

Flex 4.6 Mobile Horizontal List: Reload itemRenderer

1 Answers