在 flex 4.15 中设置 Apache DataGrid 的样式答案

【问题标题】：Styling Apache DataGrid in flex 4.15在 flex 4.15 中设置 Apache DataGrid 的样式
【发布时间】：2017-01-25 06:00:13
【问题描述】：

我想知道如何更改数据网格项的背景颜色！我使用外部 CSS 和 flex 4.6 我使用：

s|ItemRenderer
{
  contentBackgroundColor: #FF0000;
}

但是我必须升级到 apache flex 4.15 并且它不再工作了...我找不到我想设置样式的组件。在文档中我找不到可用的样式列表 T_T。

如果你有链接或回答谢谢！

【问题讨论】：

是 MX 还是 Spark Datagrid ？您是否尝试过使用 GridItemRenderer 而不是 ItemRenderer？

标签： apache apache-flex datagrid adobe

【解决方案1】：

在 adobe Flex 的文档中说：

项呈示器与 DataGrid 控件的列相关联。然后，项目渲染器控制列中每个单元格的外观。但是，每个项呈示器都可以访问 DataGrid 控件的整行的数据项。使用项渲染器的 data 属性来访问数据项。

尝试通过对所有列使用 ItemRenderer 来实现这一点，您可以以 MXML 方式或通过将 MXL 与 Action 脚本代码混合使用，例如为已知列应用样式：

<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" variableRowHeight="true">
<mx:columns>
    <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>

或在单独的动作脚本类中排除提到的脚本标记的内容，以扩展列的类型并覆盖设置数据方法，例如：

public class CheckBoxHeaderRenderer extends CheckBox
{
    override public function set data(value:Object):void
{
    _data = value as CheckBoxHeaderColumn;
    selected = _data.selected;
    //type your condition here using the property of your dataField
    if(data.property=="value"){
    this.styleName="yourClassCSSName"
    }
}

你的类 CSS 会是这样的：

    .yourClassCSSName{
contentBackgroundColor: #FF0000;
}

更多： Understanding Flex itemRenderers

Creating item renderers and item editors for the Spark DataGrid control

【讨论】：