Flex中设置DataGrid控件中字符背景以及控件背景颜色

下面的例子展示了如何通过设置 backgroundAlpha和 backgroundColor风格，在Flex中设置DataGrid控件中字符背景以及控件背景颜色。

下面是具体代码：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- http://blog.flexexamples.com/2008/03/06/setting-the-background-alpha-and-background-color-of-a-datagrid-control-in-flex/ -->
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
4.         layout="vertical"
5.         backgroundColor="white">
7.     <mx:Script>
8.         <![CDATA[
9.             private var defaultAlternatingItemColors:Array = [0xF7F7F7, 0xFFFFFF];
11.             private function checkBox_change(evt:Event):void {
12.                 if (checkBox.selected) {
13.                     dataGrid.setStyle("alternatingItemColors", defaultAlternatingItemColors);
14.                 } else {
15.                     dataGrid.setStyle("alternatingItemColors", []);
16.                 }
17.             }
18.         ]]>
19.     </mx:Script>
21.     <mx:ArrayCollection id="arrColl">
22.         <mx:source>
23.             <mx:Array>
24.                 <mx:Object c1="ColumnA.1" c2="ColumnB.1" />
25.                 <mx:Object c1="ColumnA.2" c2="ColumnB.2" />
26.                 <mx:Object c1="ColumnA.3" c2="ColumnB.3" />
27.                 <mx:Object c1="ColumnA.4" c2="ColumnB.4" />
28.                 <mx:Object c1="ColumnA.5" c2="ColumnB.5" />
29.                 <mx:Object c1="ColumnA.6" c2="ColumnB.6" />
30.                 <mx:Object c1="ColumnA.7" c2="ColumnB.7" />
31.                 <mx:Object c1="ColumnA.8" c2="ColumnB.8" />
32.                 <mx:Object c1="ColumnA.9" c2="ColumnB.9" />
33.             </mx:Array>
34.         </mx:source>
35.     </mx:ArrayCollection>
37.     <mx:ApplicationControlBar dock="true">
38.         <mx:Form styleName="plain">
39.             <mx:FormItem label="backgroundAlpha:">
40.                 <mx:HSlider id="slider"
41.                         minimum="0.0"
42.                         maximum="1.0"
43.                         value="1.0"
44.                         liveDragging="true" />
45.             </mx:FormItem>
46.             <mx:FormItem label="backgroundColor:">
47.                 <mx:ColorPicker id="colorPicker"
48.                         selectedColor="purple" />
49.             </mx:FormItem>
50.             <mx:FormItem label="use alternatingItemColors:">
51.                 <mx:CheckBox id="checkBox"
52.                         label="[0xF7F7F7, 0xFFFFFF]"
53.                         selected="true"
54.                         change="checkBox_change(event);" />
55.             </mx:FormItem>
56.         </mx:Form>
57.     </mx:ApplicationControlBar>
59.     <mx:DataGrid id="dataGrid"
60.             dataProvider="{arrColl}"
61.             backgroundColor="{colorPicker.selectedColor}"
62.             backgroundAlpha="{slider.value}"
63.             width="300"
64.             rowCount="6"
65.             verticalScrollPolicy="on" />
67. </mx:Application>

下面是执行效果，可以动手试试看：

你还可以在一个扩展的.CSS文件或者<mx:Style />中，通过下面的代码段来设置 backgroundAlpha, backgroundColor, 和 alternatingItemColors的风格：

1. <mx:style>
2. DataGrid {
3. backgroundAlpha: 0.25;
4. backgroundColor: #FF0000;
5. alternatingItemColors: ClassReference(null);
6. }
7. </mx:style>

或者你可以通过像下面的的ActionScript设置 backgroundAlpha, backgroundColor, 和 alternatingItemColors来实现:

1. <mx:script>
2. <!--[CDATA[
3. private function init():void {
4. dataGrid.setStyle("backgroundAlpha", 0.25);
5. dataGrid.setStyle("backgroundColor", 0xFF0000);
6. dataGrid.setStyle("alternatingItemColors", null);
7. }
8. ]]-->
9. </mx:script>