如何在MXAdvancedDataGridItemRenderer中设置悬停的颜色？

Question

我正在尝试使用MXAdvancedDataGridItemRenderer为AdvancedDataGrid创建项目渲染器。

当我将示例自定义项目渲染器（MXAdvancedDataGridItemRenderer）附加到AdvancedDataGrid中的分层数据时，项目渲染器无法正确渲染单元格。 如果未选中，则自定义渲染器将仅以悬停（突出显示）状态渲染。 当选择并悬停该行时，自定义项目渲染器将仅渲染选定单元格。

如何使自定义渲染器识别突出显示的行时应渲染的突出显示？

下图显示了此示例。 选择第一行，鼠标悬停在第二个单元格上方。 如您所见，单元格呈现为“选定”而不是“悬停”。

这是一个示例应用程序：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            public var data:ArrayCollection = new ArrayCollection([
                {label:"Fruit", children:[
                    {label:"Apple", price:1.5},
                    {label:"Banana", price:2},
                    {label:"Orange", price:1.75}]},
                {label:"Drink", children:[
                    {label:"Water", price:0.5},
                    {label:"Milk", price:2.25},
                    {label:"Juice", price:1.25}]}
                ]);
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <mx:AdvancedDataGrid x="10" y="10" width="350" height="200" itemRenderer="TestItemRenderer">
        <mx:dataProvider>
            <mx:HierarchicalData source="{data}"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText="Name" dataField="label"/>
            <mx:AdvancedDataGridColumn headerText="Price" dataField="price"/>
        </mx:columns>
    </mx:AdvancedDataGrid>

</s:Application>

这是示例MXAdvancedDataGridItemRenderer：

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true">

    <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{listData.label}" />

</s:MXAdvancedDataGridItemRenderer>

Answer 1

您可能想要尝试将addAutoDrawBackground =“ false”添加到MXAdvancedDataGridItemRenderer。 使用ADG的“单单元格”选择模式时遇到问题，此问题已解决。

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true"
                                  autoDrawBackground="false">

  <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{listData.label}" />

</s:MXAdvancedDataGridItemRenderer>

Answer 2

试试这个（注意rollOverColor ）：

<mx:AdvancedDataGrid x="10" y="10" width="350" height="200" rollOverColor="0xff0000" itemRenderer="TestItemRenderer">
        <mx:dataProvider>
            <mx:HierarchicalData source="{data}"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText="Name" dataField="label"/>
            <mx:AdvancedDataGridColumn headerText="Price" dataField="price"/>
        </mx:columns>
    </mx:AdvancedDataGrid>

干杯，罗布

Answer 3

您也可以通过为AdvancedDataGrid设置“样式”来实现

AdvancedDataGrid {
textRollOverColor: #000000;
textSelectedColor: #FFFFFF;
disabledColor: #8E8E8E;
borderColor: #454545;
alternatingItemColors: #FFFFFF, #FCFCFC;
verticalGridLineColor: #F6F6F6;
color: #000000;
selectionColor: #A0B3BE;
rollOverColor: #DBE4E6;
borderStyle: none;
borderThickness: 0;
fontSize: 12;
headerColors: #DBE4E6, #DBE4E6;
selectionDisabledColor: #FFFFFF;

}