FLEX itemRenderer 用于 DataGrid《二》

最新推荐文章于 2023-04-06 09:39:15 发布

原创最新推荐文章于 2023-04-06 09:39:15 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #flex #actionscript #date #function #object

Flex itemRenderer 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用内联itemRenderer自定义DataGrid的显示样式，通过一个书籍列表的例子，展示了如何根据书籍的出版日期改变单元格背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

也可以将内联 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 最终将变为紫色。