FLEX itemRenderer 用于 DataGrid《二》

?

也可以将内联 itemRenderer 用于 DataGrid。以下是应用于列的一个示例:

<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" 
variableRowHeight="true"> 
    <mx:columns> 
        <mx:DataGridColumn headerText="Pub Date" dataField="date" width="85" /> 
        <mx:DataGridColumn headerText="Author" dataField="author" width="125"/> 
        <mx:DataGridColumn headerText="Title" dataField="title"> 
            <mx:itemRenderer> 
                <mx:Component> 
                    <mx:HBox paddingLeft="2"> 
                        <mx:Script> 
                        <![CDATA[ 
                            override public function set data( value:Object ) : void { 
                                super.data = value; 
                                var today:Number = (new Date()).time; 
                                var pubDate:Number = Date.parse(data.date); 
                                if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
                                else setStyle("backgroundColor",0xffffff); 
                            } 
                        ]]> 
                        </mx:Script> 
                        <mx:Image source="{data.image}" width="50" height="50" scaleContent="true" /> 
                        <mx:Text width="100%" text="{data.title}" /> 
                    </mx:HBox> 
                </mx:Component> 
            </mx:itemRenderer> 
        </mx:DataGridColumn> 
    </mx:columns> 
</mx:DataGrid> 

如您所见,这次比前两个要复杂得多,但结构相同: <mx:itemRenderer> 包含一个
<mx:Component> 定义。 
<mx:Component> 是为了提供一个 MXML 语法,用于在代码中创建一个 ActionScript 类。
想象一下,剪切 <mx:Component> 块中出现的代码并将它放入一个单独文件中并提供一个类名
称。当您查看内联 itemRenderer 时,它看上去就像一个完整的 MXML 文件,不是吗？有根标
记 (本例中为 <mx:HBox>),甚至 <mx:Script> 块。 
本例中的 <mx:Script> 块用于覆盖 set data 函数,使得 itemRenderer 的背景色可以更
改。在本例中,无论书籍的未来出版数据为何时,背景将从白色更改为其他颜色。记住,itemRenderer 是循环使用的,所以如果测试失败,还必须将颜色设置回白色。否则,当用户滚
动列表时,所有 itemRenderer 最终将变为紫色。