The following example shows how you can create multi-line rows with wrapping text and variable row heights with the Flex List control.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; private function init():void { commentsXML.send(); } private function commentsXML_result(evt:ResultEvent):void { var resultXML:XML = evt.currentTarget.lastResult; list.dataProvider = resultXML.channel.item; } private function commentsXML_fault(evt:FaultEvent):void { mx.controls.Alert.show("Unable to load XML:\n" + commentsXML.url, "ERROR"); } ]]> </mx:Script> <mx:HTTPService id="commentsXML" url="http://blog.flexexamples.com/comments/feed/" resultFormat="e4x" showBusyCursor="true" result="commentsXML_result(event);" fault="commentsXML_fault(event);" /> <mx:List id="list" variableRowHeight="true" wordWrap="true" labelField="title" width="250" /> </mx:Application>
View source is enabled in the following example.
Is there any switch to freeze scroll thumb size?
maliboo,
I don’t believe you can freeze the scroll thumb size. You can try filing an enhancement request in the public Flex bug system at http://bugs.adobe.com/flex/.
Peter
If we will set on horizontalScrollPolicy=”on” then multi-line will not work, I guess it is a feature.
@JabbyPanda,
Multi-line still works (at least it does in 3.4), it just wraps in a different spot. How/where were you expecting it to wrap if you set the horizontal scroll policy?
Peter
Looks good, but I have one problem with it, when I scroll using the mouse wheel, it also scrolls the label text, so I lose lines of the content
You can find the solution to the above bug at the following link: http://stackoverflow.com/questions/2816542/scrolling-through-list-element-causes-text-elements-to-scroll-as-well
Can you create gridlines in this List Control? In other words a line dividing each row?
thanks
-Mike
@Mike,
You could probably build a custom item renderer with a horizontal line at the top. You could probably use the
rowIndex
property in the custom item renderer to prevent the top item renderer from displaying its separator.Peter
Actually, I believe it may be
itemIndex
and notrowIndex
, my bad.This may do what you’re looking for:
And the custom Spark Item renderer, skins/DottedItemRen.mxml, is as follows:
Peter