How to use Image as the Selection and Hovering background in Flex DataGrid?

I want to display an image instead of Color in item Selection and Hovering(mouse over) in Flex DataGrid. how开发者_StackOverflow社区 i can do it ?

You could do this with an inline item renderer or a custom item renderer. Here's a quick and dirty example of how to do it with an inline item renderer. You'll probably want to tweak this a bit to fit your solution but it should give you a good starting point.

<mx:DataGrid dataProvider="{myDataProvider}">
        <mx:columns>
            <mx:DataGridColumn dataField="someDataField" width="100">
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:Canvas mouseOver="myImage.visible = true" mouseOut="myImage.visible = false" width="100">
                            <mx:Label text="{data.someDataField}" width="100%" x="0" y="0" />
                            <mx:Image id="myImage" x="0" y="0" source="{outerDocument.myImageClass}" visible="false" />
                        </mx:Canvas>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

let say you have a

<mx:image id="img" src="sample.jpg" mouseOver="onHover()" mouseOut="onOut()"/>

a function

private function onHover():void{
   img.src="sample2.jpg";
   img.validateNow();

}

private function onOut():void{
   img.src = "sample.jpg";
   img.validateNow();
}

See if this works. not yet tested but the logic maybe there.