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 最终将变为紫色。