Text in Flex's list

Question

How can locate text in the mx:List like this?

|"text1"         "test2"|
 -----------------------
|"text3"         "text4"|

Answer 1

Actually you have to look at wordWrap="false|true" or just do something like this (you can add this code to your flex application and see - it works perfectly)

<mx:List> 
<mx:String>"text"        "text"</mx:String>
<mx:String>"text2"        "text3"</mx:String>
<mx:String>"text4"        "text5"</mx:String>
</mx:List>

So all you have to do is convert your variables to strings and join 3 strings

         "text1" +   "               " + "text2"

And BTW at "Adobe® Flex™ 3 Language Reference" you can find it all=)

---

The other way Is to create costume Item renderer. Good tutorial on this is on GoToAndLearn.com in Introduction to Flex: Part 2 and 3 ("...create a custom Flex component and use it as an item renderer for the List control...")

Answer 2

You're going to need to make a custom item renderer that has a layout like:

<mx:HBox width="100%">
  <mx:Label text="{data.value1}" />
  <mx:Spacer width="100%" />
  <mx:Label text="{data.value2}" />
</mx:HBox>

The spacer will dynamically adjust itself to push the labels to either edge of the hbox;

edit: oops yeah i meant 100%

Answer 3

Creating a custom label renderer along the lines of @greg's answer is probably the way to go. One caution though when using custom item renderers where you add additional elements is to check the associated control class's measuremethod to make sure that the size of the additional elements will be taken into account when the control (the Listin this case) is sized. Otherwise you might end up with an unexpected result. See this post for an example of what I mean.