有才华的人，别忘记给滋润你的那块土壤施肥
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  28 随笔 :: 5 文章 :: 147 评论 :: 0 Trackbacks
DataGrid透明显示背景图片，及表头透明
     今天有人问我flex中怎样向DataGrid添加背景图片，以及怎样使表格透明。
   其实这个查下文档就知道，可以如下用setStyle设置：

dataGrid.setStyle('backgroundAlpha',alpha)
  
    但是，没多久又告诉我，表头并不透明，看不到后面的背景图片，查了下api，简单继承下DataGrid，重写drawHeaderBackground方法就行，如：

override protected function drawHeaderBackground(headerBG:UIComponent):void
 {
   //透明参数
   headerBG.alpha = _headerAlpha;
  //是否可见
   headerBG.visible = _headerVisible;
   
   super.drawHeaderBackground(headerBG);
 }

效果如下：
1，未处理的DataGrid，表格不透明


2,处理DataGrid后


测试效果可以点击：http://www.munkiihouse.com/flexapps/StyleDataGrid/StyleDataGridDemo.html

代码：
1、继承于DataGrid：
package com.mh.components
{
 import mx.controls.DataGrid;
 import mx.core.UIComponent;
 public class StyleDataGrid extends DataGrid
 {
  
  private var _headerBGAlpha:Number = 1;  
  public function set headerBGAlpha(value:Number):void
  {
   _headerBGAlpha = value;
   invalidateDisplayList();
  }
  
  private var _headerBGVisible:Boolean = true;  
  public function set headerBGVisible(value:Boolean):void
  {
   _headerBGVisible = value;
   invalidateDisplayList();
  }

2、测试用例：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:mhc="com.mh.components.*" backgroundColor="#FF8000" backgroundGradientColors="[#ff8040, #e14900]">

 
 <mx:Panel x="10" y="10" width="550" height="500" layout="absolute" title="Albums" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" backgroundImage="@Embed('bg.jpg')">
  <mhc:StyleDataGrid id="sdg_albums" dataProvider="{Catalog.cataglog}" left="10" right="10" top="10" bottom="10">  
   <mhc:columns>
    <mx:DataGridColumn dataField="ARTIST" headerText="Artist" width="200" />
    <mx:DataGridColumn dataField="TITLE" headerText="Title" />
    <mx:DataGridColumn dataField="YEAR" headerText="Year" width="60" />
   </mhc:columns>  
  </mhc:StyleDataGrid>
 </mx:Panel>
 
 
 <mx:Panel x="568" y="10" width="300" height="200" layout="vertical" title="Controls" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
  <mx:FormItem label="Header Alpha:"  width="100%" labelWidth="120">
   <mx:HSlider id="hs_h_alpha" value="1" minimum="0" maximum="1" snapInterval="0.1" allowTrackClick="true" change="{sdg_albums.headerBGAlpha = hs_h_alpha.value}" width="100"/>   
  </mx:FormItem>
  
  <mx:FormItem label="Header Visable:"  labelWidth="120">
   <mx:CheckBox id="cb_visible" label="Visable" selected="true" change="{sdg_albums.headerBGVisible = cb_visible.selected}"/>     
  </mx:FormItem>
  <mx:FormItem label="Background Alpha:"  width="100%" labelWidth="120">
   <mx:HSlider id="hs_bg_alpha" value="0.5" minimum="0" maximum="1" snapInterval="0.1" allowTrackClick="true" change="{sdg_albums.setStyle('backgroundAlpha',hs_bg_alpha.value)}" width="100"/>   
  </mx:FormItem>
 </mx:Panel>
 
</mx:Application>


3、测试数据：
package
{
 public class Catalog
 {
  
  public static function get cataglog():XMLList
  {
   return catalog..CD;
  }
  
  private static var catalog:XML = <CATALOG>
     <CD>
       <TITLE>Empire Burlesque</TITLE>
       <ARTIST>Bob Dylan</ARTIST>
       <COUNTRY>USA</COUNTRY>
       <COMPANY>Columbia</COMPANY>
       <PRICE>10.90</PRICE>
       <YEAR>1985</YEAR>
     </CD>
     <CD>
       <TITLE>Hide your heart</TITLE>
       <ARTIST>Bonnie Tylor</ARTIST>
       <COUNTRY>UK</COUNTRY>
       <COMPANY>CBS Records</COMPANY>
       <PRICE>9.90</PRICE>
       <YEAR>1988</YEAR>
     </CD>
     <CD>
       <TITLE>Greatest Hits</TITLE>
       <ARTIST>Dolly Parton</ARTIST>
       <COUNTRY>USA</COUNTRY>
       <COMPANY>RCA</COMPANY>
       <PRICE>9.90</PRICE>
       <YEAR>1982</YEAR>
     </CD>
     <CD>
       <TITLE>Romanza</TITLE>
       <ARTIST>Andrea Bocelli</ARTIST>
       <COUNTRY>EU</COUNTRY>
       <COMPANY>Polydor</COMPANY>
       <PRICE>10.80</PRICE>
       <YEAR>1996</YEAR>
     </CD>
     <CD>
       <TITLE>When a man loves a woman</TITLE>
       <ARTIST>Percy Sledge</ARTIST>
       <COUNTRY>USA</COUNTRY>
       <COMPANY>Atlantic</COMPANY>
       <PRICE>8.70</PRICE>
       <YEAR>1987</YEAR>
     </CD>
     <CD>
       <TITLE>Black angel</TITLE>
       <ARTIST>Savage Rose</ARTIST>
       <COUNTRY>EU</COUNTRY>
       <COMPANY>Mega</COMPANY>
       <PRICE>10.90</PRICE>
       <YEAR>1995</YEAR>
     </CD>
     <CD>
       <TITLE>1999 Grammy Nominees</TITLE>
       <ARTIST>Many</ARTIST>
       <COUNTRY>USA</COUNTRY>
       <COMPANY>Grammy</COMPANY>
       <PRICE>10.20</PRICE>
       <YEAR>1999</YEAR>
     </CD>
     <CD>
       <TITLE>For the good times</TITLE>
       <ARTIST>Kenny Rogers</ARTIST>
       <COUNTRY>UK</COUNTRY>
       <COMPANY>Mucik Master</COMPANY>
       <PRICE>8.70</PRICE>
       <YEAR>1995</YEAR>
     </CD>
     <CD>
       <TITLE>Big Willie style</TITLE>
       <ARTIST>Will Smith</ARTIST>
       <COUNTRY>USA</COUNTRY>
       <COMPANY>Columbia</COMPANY>
       <PRICE>9.90</PRICE>
       <YEAR>1997</YEAR>
     </CD>
     <CD>
       <TITLE>Tupelo Honey</TITLE>
       <ARTIST>Van Morrison</ARTIST>
       <COUNTRY>UK</COUNTRY>
       <COMPANY>Polydor</COMPANY>
       <PRICE>8.20</PRICE>
       <YEAR>1971</YEAR>
     </CD>

   </CATALOG>;
 }
}
posted on 2009-03-27 22:59 kissjava 阅读(4535) 评论(4)  编辑  收藏 所属分类: Flex

评论

# re: DataGrid透明显示背景图片，及表头透明 2009-04-30 11:54 谢谢
flex3没试成功，源程序是flex2版的
楼主请指点: xwy55555@msn.com  回复  更多评论
  

# re: DataGrid透明显示背景图片，及表头透明 2009-05-02 23:49 枯宽
没用过flex2，不知道有什么错误？  回复  更多评论
  

# 就好玩小游戏 2009-06-03 11:01 www.9haowan.com
http://www.munkiihouse.com/flexapps/StyleDataGrid/srcview/index.html

这有源码：flex3可以成功的。  回复  更多评论
  

# 请求帮个忙 2012-08-23 19:33 李志奎
这个文章的解决方案，麻烦您能不能指导一下，邮箱lsksll@163.com

急用，谢谢  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: