Flex multiple spark lists with scrolling synced - actionscript-3

Question

I have several horizontal scrolling lists with differing item widths stacked inside a Vertical Group. On an item click all any selected item from the other lists will be cleared. When any of the lists are scrolled all the other lists should scroll exactly the same amount in the same direction, simalar to http://www.foxsports.com.au/tvguide.
The synced scrolling is throwing an undefined error and has crashed the adl(it is a mobile app) on one occasion. This happens only when I add more than 2 synced scrolling lists via event listeners.
So my question is: Can anyone see why this errors or is there a better way to achieve this type of horizontal scrolling multi-list, possibly a really wide data-grid or group of buttons inside a scroller?
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="view1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.PropertyChangeEvent;
// listen for scroll event
protected function view1_creationCompleteHandler(event:FlexEvent):void
{
list1.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler1);
list2.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler2);
list3.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler3);
}
// scroll all lists together
private function propertyChangeHandler1(evt:PropertyChangeEvent):void
{
var n:Number = Number(evt.newValue);
list2.dataGroup.horizontalScrollPosition = n;
list3.dataGroup.horizontalScrollPosition = n;
}
private function propertyChangeHandler2(evt:PropertyChangeEvent):void
{
var n:Number = Number(evt.newValue);
list1.dataGroup.horizontalScrollPosition = n;
list3.dataGroup.horizontalScrollPosition = n;
}
private function propertyChangeHandler3(evt:PropertyChangeEvent):void
{
var n:Number = Number(evt.newValue);
list2.dataGroup.horizontalScrollPosition = n;
list1.dataGroup.horizontalScrollPosition = n;
}
// on click clear currently selected
protected function listClickHandler(_iList:int, _index:int):void
{
switch(_iList)
{
case 1:
{
list2.selectedIndex = -1;
list3.selectedIndex = -1;
break;
}
case 2:
{
list1.selectedIndex = -1;
list3.selectedIndex = -1;
break;
}
case 3:
{
list2.selectedIndex = -1;
list1.selectedIndex = -1;
break;
}
}
}
]]>
</fx:Script>
<fx:Declarations>
<s:ArrayCollection id="myArrayCollection">
<fx:Object label="FIRST" message="54.99"/>
<fx:Object label="Stapler" message="3.59"/>
<fx:Object label="Printer" message="129.99"/>
<fx:Object label="Notepad" message="2.49"/>
<fx:Object label="Mouse" message="21.79"/>
<fx:Object label="Keyboard" message="32.99"/>
<fx:Object label="Ink" message="54.99"/>
<fx:Object label="Stapler" message="3.59"/>
<fx:Object label="Printer" message="129.99"/>
<fx:Object label="Notepad" message="2.49"/>
<fx:Object label="Mouse" message="21.79"/>
<fx:Object label="Keyboard" message="32.99"/>
<fx:Object label="Ink" message="54.99"/>
<fx:Object label="Stapler" message="3.59"/>
<fx:Object label="Printer" message="129.99"/>
<fx:Object label="Notepad" message="2.49"/>
<fx:Object label="Mouse" message="21.79"/>
<fx:Object label="Keyboard" message="32.99"/>
<fx:Object label="Ink" message="54.99"/>
<fx:Object label="Stapler" message="3.59"/>
<fx:Object label="LAST" message="32.99"/>
</s:ArrayCollection>
</fx:Declarations>
<s:VGroup id="lists" gap="0" left="0" right="0" top="0" bottom="0" width="180%" height="100%" >
<s:List id="list1" width="100%" click="listClickHandler(1, list1.selectedIndex)" horizontalScrollPolicy="on" verticalScrollPolicy="off" selectedIndex="0" dataProvider="{myArrayCollection}">
<s:layout>
<s:HorizontalLayout gap="0" />
</s:layout>
</s:List>
<s:List id="list2" width="100%" click="listClickHandler(2, list2.selectedIndex)" horizontalScrollPolicy="on" verticalScrollPolicy="off" selectedIndex="0" dataProvider="{myArrayCollection}">
<s:layout>
<s:HorizontalLayout gap="0" />
</s:layout>
</s:List>
<s:List id="list3" width="100%" click="listClickHandler(3, list3.selectedIndex)" horizontalScrollPolicy="on" verticalScrollPolicy="off" selectedIndex="0" dataProvider="{myArrayCollection}">
<s:layout>
<s:HorizontalLayout gap="0" />
</s:layout>
</s:List>
</s:VGroup>
</s:View>

Answer 1

Here is the simple way to do it, obviously the lists need to be wider than stage for it to scroll.
<s:Scroller id="sc" horizontalScrollPolicy="on" verticalScrollPolicy="off" width="100%">
<s:VGroup id="lists" gap="0" left="0" right="0" top="0" bottom="0">
<s:List id="list1" horizontalScrollPolicy="off" verticalScrollPolicy="off" dataProvider="{data}">
<s:layout>
<s:HorizontalLayout gap="0" />
</s:layout>
</s:List>
<s:List id="list2" horizontalScrollPolicy="off" verticalScrollPolicy="off" dataProvider="{data}">
<s:layout>
<s:HorizontalLayout gap="0" />
</s:layout>
</s:List>
<s:List id="list3" horizontalScrollPolicy="off" verticalScrollPolicy="off" dataProvider="{data}">
<s:layout>
<s:HorizontalLayout gap="0" />
</s:layout>
</s:List>
</s:VGroup>
</s:Scroller>

Answer 2

Dont go for Long code,
You can put your two listboxes inside Two scrollviewers and in the scrollviewer's viewChanged event write your code in codebehind.
private void ScrollViewer1_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
ScrollViewer2.ScrollToHorizontalOffset(double.Parse(ScrollViewer1.HorizontalOffset.ToString()));
}

Answer 3

Tested your example on a computer with 4.6 sdk but i see no errors.
Still your code will not work on lists of different size (in this case your lists will scroll only for the smallest list size) .
Also instead of using PropertyChangeEvent on viewport try using Event.CHANGE on scrollBar:
protected function view1_creationCompleteHandler(event:FlexEvent):void
{
list1.scroller.horizontalScrollBar.addEventListener(Event.CHANGE, propertyChangeHandler1);
list2.scroller.horizontalScrollBar.addEventListener(Event.CHANGE, propertyChangeHandler2);
list3.scroller.horizontalScrollBar.addEventListener(Event.CHANGE, propertyChangeHandler3);
}
// scroll all lists together
private function propertyChangeHandler1(evt:Event):void
{
var source = evt.currentTarget as Scroller;
var n:Number = list1.scroller.viewport.horizontalScrollPosition;
list2.dataGroup.horizontalScrollPosition = n;
list3.dataGroup.horizontalScrollPosition = n;
}
private function propertyChangeHandler2(evt:Event):void
{
var n:Number = list2.scroller.viewport.horizontalScrollPosition;
list1.dataGroup.horizontalScrollPosition = n;
list3.dataGroup.horizontalScrollPosition = n;
}
private function propertyChangeHandler3(evt:Event):void
{
var n:Number = list3.scroller.viewport.horizontalScrollPosition;
list2.dataGroup.horizontalScrollPosition = n;
list1.dataGroup.horizontalScrollPosition = n;
}
And if you need to change the scroll programmatically use also FlexEvent.VALUE_COMMIT