Mar 08

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

FlexAdd comments

下面的例子展示了如何通过设置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">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             private var defaultAlternatingItemColors:Array = [0xF7F7F7, 0xFFFFFF];
  10.  
  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>
  20.  
  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>
  36.  
  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>
  58.  
  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" />
  66.  
  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>

        原文作者：Peter deHaan     翻译：minidxer

written by Minidxer  |  tags: , , , , ,

Related Post

One Response to “Flex中设置DataGrid控件中字符背景以及控件背景颜色”

Trackbacks

Leave a Reply