Text can be any size so you have to lock the width to the HBox's explicitWIdth.
Try:
<mx:HBox horizontalScrollPolicy="off" >
<mx:Image width="{explicitWidth * .2}"
source="starIcon.png" />
<mx:Text width="{explicitWidth * .8}"
selectable="false" text="{data.name} ({data.abbr})" />
</mx:HBox>
Alex Harui
Flex SDK Developer
Adobe Systems Inc.<http://www.adobe.com/>
Blog: http://blogs.adobe.com/aharui
From: [email protected] [mailto:[email protected]] On Behalf
Of pmstp
Sent: Friday, October 09, 2009 11:21 AM
To: [email protected]
Subject: [flexcoders] Weird DataGrid custom item renderer behavior
Hi all,
A while ago I wrote (in ActionScript 3) a custom item renderer for a DataGrid
very similar to the mxml version below.
It basically has a HBox with a icon and a label to its left on the first
column, and I wanted to wrapped the text around as users resize the column. I
was/am using variable row
height so the row height could change when the label text wraps.
It almost worked, just like the example below. Try resizing the column just a
few pixels, or just scroll up and down and you'll see that sometimes the text
gets truncated and sometimes it wraps nicely.
I was never able to find the source of the problem and fix the bug
(I'm still new to custom item renderers so I probably missed something).
Or is this a bug? I'm using Flex 3 (3.0.0.477)
Thanks in advance,
Pedro Proenca
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute" width="800" height="600" >
<mx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</mx:Script>
<mx:Array id="dg_data">
<mx:Object name="Baltimore Orioles" abbr="BAL" number="1" />
<mx:Object name="Boston Red Sox" abbr="BOS" number="2" />
<mx:Object name="Chicago White Sox" abbr="CWS" number="3" />
<mx:Object name="Cleveland Indians" abbr="CLE" number="4" />
<mx:Object name="Detroit Tigers" abbr="DET" number="5" />
<mx:Object name="Kansas City Royals" abbr="KC" number="6" />
<mx:Object name="Los Angeles Angels of Anaheim" abbr="LAA" number="7" />
<mx:Object name="Minnesota Twins" abbr="MIN" number="8" />
<mx:Object name="New York Yankees" abbr="NYY" number="9" />
<mx:Object name="Oakland Athletics" abbr="OAK" number="10" />
<mx:Object name="Seattle Mariners" abbr="SEA" number="11" />
<mx:Object name="Tampa Bay Devil Rays" abbr="TB" number="12" />
<mx:Object name="Texas Rangers" abbr="TEX" number="13" />
<mx:Object name="Toronto Blue Jays" abbr="TOR" number="14" />
</mx:Array>
<mx:DataGrid id="dg" dataProvider="{dg_data}" width="80%" height="50%"
variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name"
width="100">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalScrollPolicy="off">
<mx:Image width="20%" source="starIcon.png" />
<mx:Text width="80%" selectable="false"
text="{data.name} ({data.abbr})" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="abbr" />
<mx:DataGridColumn headerText="Order" dataField="number" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
