DataGrid 制作经典的排行榜效果

Flex 作出 像迅雷看看 一样的 视频排行效果，要求鼠标移动上去会显示详细信息

效果如图：

说明：使用的空间就是datagrid

要注意的是：1.VBox 是可以自动 布局 产生缩放效果的

???????????????????? 2 DataGrid 有一个属性 variableRowHeight="true" 可以让DataGrid 的行宽随子组件而改变

???????????????????? 3DataGrid 控制单元格最好 单独定义组件 这点 我另写一个帖子介绍

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="349" width="180" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:ArrayCollection id="goodList">
?? <mx:Object name="小太阳" singer="五月天" source="1.mp3" special="小太阳" renqi="22"/>
?? <mx:Object name="画心" singer="张靓颖" source="2.mp3" special="电影画皮主题曲" renqi="22"/>
?? <mx:Object name="曹操" singer="林俊杰" source="3.mp3" special="JJ最新单曲" renqi="22"/>
?? <mx:Object name="U And Me" singer="羽泉" source="4.mp3" special="朋友难当" renqi="22"/>
?? <mx:Object name="原谅" singer="张玉华" source="5.mp3" special="张玉华同名专辑" renqi="22"/>
?? <mx:Object name="勇气" singer="梁静茹" source="6.mp3" special="勇气" renqi="22"/>
</mx:ArrayCollection>
?? <mx:Canvas width="179" height="594" verticalScrollPolicy="off" horizontalScrollPolicy="off">
???
??? <mx:DataGrid id="secipal" x="0" y="0" dragEnabled="true" height="348" width="100%" selectable="false"
???? alternatingItemColors="[#0A0A0A, #0A0A0A]" showHeaders="false" headerColors="#666060" dataProvider="{goodList}"
???? horizontalScrollPolicy="off" verticalScrollPolicy="off"
???? variableRowHeight="true">
???? <mx:columns>
????? <mx:DataGridColumn headerText="" dataField="musicName">
?????? <mx:itemRenderer>
??????? <mx:Component>
???????
??????? <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off" creationComplete="init()"
??????? autoLayout="true">
??????? <mx:Script>
???????? <![CDATA[
????????? [Bindable]
????????? private var hid:int;
????????? [Bindable]
????????? private var cor:uint;
????????? private function init():void{
?????????? hid=this.parentDocument.goodList.getItemIndex(data);
?????????? trace(hid);
?????????? if(hid<3){
??????????? cor = 0xfc4a04 as uint;
??????????
?????????? }else{
??????????? cor = 0x777575 as uint;
?????????? }
????????? }
????????? private function showmore():void{
?????????? h1.height = 0;
?????????? h2.height = 103;
?????????? this.height = 103;
??????????
????????? }
????????? private function hidenmore():void{
?????????? h1.height = 25;
?????????? h2.height = 0;
?????????? this.height = 30;?????????
????????? }
???????? ]]>
??????? </mx:Script>
???????? <mx:HBox id="h1" verticalAlign="middle" width="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"
???????? mouseOver="showmore()" mouseOut="hidenmore()">
????????? <mx:Spacer width="30" />
?????????
????????? <mx:TextInput width="17" color="#FFFFFF" text="{hid+1}" backgroundColor="{cor}" textAlign="center" editable="false" fontWeight="bold"/>
????????? <mx:Label color="#9a9a9a" text="{data.name}" height="25" width="100%" fontSize="13" textAlign="center"/>
?????????
???????? </mx:HBox>
????????
????????? <mx:Canvas x="206" y="81" width="100%" backgroundColor="#050505" horizontalScrollPolicy="off" verticalScrollPolicy="off"
?????????? id="h2" mouseOver="showmore()" mouseOut="hidenmore()" height="0" backgroundAlpha="1">
?????????? <mx:Image x="0" y="0" width="77" height="103" source="{data.source}"/>
?????????? <mx:TextInput id="tet1" x="85" y="0" width="17" color="#FFFFFF" text="{hid+1}" backgroundColor="{cor}" editable="false" fontWeight="bold"/>
?????????? <mx:Text x="110" y="0" text="{data.name}" color="#FCFCFC" fontWeight="bold" fontSize="12"/>
?????????? <mx:Text x="85" y="28" text="人气：" color="#CF4925" fontSize="11" width="44"/>
?????????? <mx:Text x="120" y="28" text="{data.renqi}" width="97" color="#E5591B" fontSize="11"/>
?????????? <mx:Text x="85" y="55" text="作者：" color="#C3C0BF" fontSize="11" width="44"/>
?????????? <mx:Text x="120" y="55" text="{data.singer}" width="97" color="#BEBAB8" fontSize="11"/>
?????????? <mx:Text x="85" y="75" text="共{data.renqi}集" color="#ACAEAE"/>
????????? </mx:Canvas>
????????
?????????
????????
??????? </mx:VBox>
????????
??????? </mx:Component>
?????? </mx:itemRenderer>
????? </mx:DataGridColumn>
???? </mx:columns>
??? </mx:DataGrid>
????
?? </mx:Canvas>
??
</mx:Application>