有才华的人,别忘记给滋润你的那块土壤施肥

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  28 随笔 :: 5 文章 :: 147 评论 :: 0 Trackbacks
     今天有人问我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 阅读(4502) 评论(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

急用,谢谢  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: