[flexcoders] Change the row height of DataGrid, which contain more than one text compoent?

[bigbb_kimo]

Dear all,

I had a datagrid with an item render which contain two Text component
and one TextArea. The contents of all the three components are set by
htmlText attribute.

However, I found that the height of the row can not measure correctly.
I have tried to set the wordWrap=true and variableRowHeight="true" of
the DataGrid. Please refer to the following code snippet.

// start 
<mx:DataGrid height="100%" variableRowHeight="true" width="100%"
dataProvider="{Search.lastResult}" >
        <mx:columns>                                            
          <mx:DataGridColumn headerText="Test" width="8" sortable="false">
           <mx:itemRenderer>
                <mx:Component>
                <mx:Box height="0" width="100%" backgroundAlpha="0">
                <mx:Label text="{data.Date}" fontSize="10"/>
                <mx:Text fontSize="14" width="100%" textAlign="center"
htmlText="{data.Title}" fontWeight="bold"/>
                <controls:AbstractTextArea fontSize="14"
condenseWhite="true" wordWrap="true" backgroundAlpha="0" width="100%"
height="100%" textAlign="left" htmlText="{data.Abstract}"
editable="false"/>
                </mx:Box>                                                       
         </mx:Component>
  </mx:itemRenderer>                 
        </mx:DataGridColumn>

// end

I also try to subclass the TextArea to try to dynamic change the
height of the surronding Box. However, that is too heuristic to practice.

Do you have any good ideas? 

Thanks a lot.