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="<" paddingLeft="20"/>
<s:Spacer width="100%"/>
<s:Label fontWeight="bold" text="{data.status}"/>
<s:Spacer width="100%"/>
<s:Label fontWeight="bold" text=">" 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