Search Flex Samples

Creating a Flex DataGrid control with a transparent background

The following example demonstrates how you can create a Flex DataGrid control with a transparent background by setting the backgroundAlpha style to 0.0, and the alternatingItemColors style to an empty array.




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:Script>

<![CDATA[

import mx.events.ColorPickerEvent;



private function colorPicker_creationComplete(evt:Event):void {

colorPicker.selectedColor = Application.application.getStyle("backgroundColor");

}



private function colorPicker_change(evt:ColorPickerEvent):void {

Application.application.setStyle("backgroundColor", colorPicker.selectedColor);

}

]]>

</mx:Script>


<mx:Array id="arr">

<mx:Object label="User 1" data="1" />

<mx:Object label="User 2" data="2" />

<mx:Object label="User 3" data="3" />

<mx:Object label="User 4" data="4" />

<mx:Object label="User 5" data="5" />

<mx:Object label="User 6" data="6" />

<mx:Object label="User 7" data="7" />

<mx:Object label="User 8" data="8" />

</mx:Array>


<mx:ApplicationControlBar dock="true">

<mx:Label text="backgroundColor:" />

<mx:ColorPicker id="colorPicker"

creationComplete="colorPicker_creationComplete(event)"

change="colorPicker_change(event)" />

</mx:ApplicationControlBar>


<mx:DataGrid id="dataGrid"

backgroundAlpha="0.0"

alternatingItemColors="{[]}"

dataProvider="{arr}">

<mx:columns>

<mx:DataGridColumn dataField="label" />

<mx:DataGridColumn dataField="data" />

</mx:columns>

</mx:DataGrid>


</mx:Application>

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples