The following example shows you how you can create a horizontally scrolling List control in Flex by setting the horizontalScrollPolicy property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/26/scrolling-a-flex-list-control-horizontally/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XML id="xmlDP">
<root>
<node>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</node>
<node>Donec sit amet dui nec pede aliquam auctor.</node>
<node>Integer vestibulum sodales dui.</node>
<node>Sed nonummy ligula et tortor.</node>
<node>Aenean varius neque vel felis.</node>
<node>Phasellus venenatis ipsum sit amet nisi.</node>
<node>Nullam vitae turpis et ipsum cursus venenatis.</node>
<node>Pellentesque tincidunt pede non arcu.</node>
<node>Aliquam ut massa quis ante dignissim egestas.</node>
<node>Curabitur facilisis velit sit amet metus.</node>
<node>Vivamus ornare massa ac massa.</node>
<node>Nam accumsan rutrum purus.</node>
</root>
</mx:XML>
<mx:List id="list"
dataProvider="{xmlDP.node}"
horizontalScrollPolicy="on"
verticalScrollPolicy="auto"
rowCount="6"
width="200" />
</mx:Application>
View source is enabled in the following example.
Great taste! Less filling!
But there is one “gotcha”. If your List control is small (say, 100 pixels wide) and your text is long (say, 400 pixels wide), the List may not scroll all the way to the end of the text. The solution? Set the maxHorizontalScrollPosition property. (Thanks to Ella for the tip!)
Consider the following example. In this example we have two List controls. The List control on the left sets its width to 150 pixels, whereas the List control on the right sets its width to 150 pixels and uses the creationComplete event to call a function which sets the maxHorizontalScrollPosition property to the value of the list’s columnWidth property.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/26/scrolling-a-flex-list-control-horizontally/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function init():void {
list2.maxHorizontalScrollPosition = list2.columnWidth;
}
]]>
</mx:Script>
<mx:XML id="xmlDP">
<root>
<node>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</node>
<node>Donec sit amet dui nec pede aliquam auctor.</node>
<node>Integer vestibulum sodales dui.</node>
<node>Sed nonummy ligula et tortor.</node>
<node>Aenean varius neque vel felis.</node>
<node>Phasellus venenatis ipsum sit amet nisi.</node>
<node>Nullam vitae turpis et ipsum cursus venenatis.</node>
<node>Pellentesque tincidunt pede non arcu.</node>
<node>Aliquam ut massa quis ante dignissim egestas.</node>
<node>Curabitur facilisis velit sit amet metus.</node>
<node>Vivamus ornare massa ac massa.</node>
<node>Nam accumsan rutrum purus.</node>
</root>
</mx:XML>
<mx:List id="list1"
dataProvider="{xmlDP.node}"
horizontalScrollPolicy="on"
verticalScrollPolicy="on"
rowCount="6"
width="150" />
<mx:List id="list2"
dataProvider="{xmlDP.node}"
horizontalScrollPolicy="on"
verticalScrollPolicy="on"
rowCount="6"
width="150"
creationComplete="init();" />
</mx:Application>
View source is enabled in the following example.
While this technique of setting the maxHorizontalScrollPosition property to the columnWidth property seems to work in this instance, I’ve only done very limited testing. I haven’t tested in all cases such as if you load strings from external files or web services, or if your List has long strings which aren’t currently visible in the list’s view. You may have to do some tweaking to get this working in your particular circumstance.
very nice trick.
i have another question about TileList and scrolling (actually two):
- how can i control amount of scrolling pixels, say vertical? by default scroll occurs for one line (i.e. scroll for one item along), but what i should to do if i want to scroll for three line?
- how can i use liveScrolling properties in TileList? simply set its to true change nothing…
anyway thank you, do a big deal.
Hi there,
I had a similar problem in an app of mine in which a list’s data provider is being received from an http service. For some strange reason the list did show all received data but without adapting the required maxHorizontalScrollPosition. so what worked fine for me was listening to the dataprovider’s collectionChange event and setting the list’s maxHorizontalScrollPosition according to the measured list width.
cheers, burn
[…]
[…]
ok, my example code got cut away. but the magic happens when you calculate the required horizontal width with measureWidthOfItems(0,0) and assign the measured value minus the lists’s width to your list’s maxHorizontalScrollPosition.
burn