Flex4 自定义Datagrid的itemRenderer和headerRenderer【转】

先看图片:

 因为项目中需要用到datagrid,而且需要在其中嵌入dropdownlist,包括header和item。

一开始嵌入的是Combobox,但是发现用Combobox的话,稍微动一个datagrid,如改变大小等,Combobox里的数据立刻不见了,所以使用dropdownlist控件,反正是Flex4.1。

 废话完毕,上代码:

for datagrid:

代码
< mx:DataGrid id = " dgList "  width = " 100% "   height = " 100% "  dataTipFunction = " buildToolTip "
                         variableRowHeight
= " true "  sortableColumns = " false "  visible = " false " >
                
< mx:columns >     
                    
< mx:DataGridColumn headerText = " chkSave "  visible = " false " >
                        
< mx:itemRenderer >                             
                            
< fx:Component >
                                
< mx:CheckBox selected = " {data.chkSave} " />         
                            
</ fx:Component >
                        
</ mx:itemRenderer >
                    
</ mx:DataGridColumn >
                    
< mx:DataGridColumn headerText = " chkDel "  visible = " false " >
                        
< mx:itemRenderer >
                            
< fx:Component >
                                
< mx:CheckBox selected = " {data.chkDel} "   />         
                            
</ fx:Component >
                        
</ mx:itemRenderer >
                    
</ mx:DataGridColumn >
                    
< mx:DataGridColumn dataField = " Xbrl "  headerText = " XBRL "  itemRenderer = " cons.com.epro.child.myCombox "   />                     
                    
< mx:DataGridColumn headerText = " Column1 "  dataField = " Column1 "  width = " 200 "  showDataTips = " true " />             
                    
< mx:DataGridColumn headerText = " NOTE "  dataField = " NOTE "  width = " 50 "   />
                    
                    
< mx:DataGridColumn headerText = " Column2 "  dataField = " Column2 "  width = " 90 "  wordWrap = " true "   headerRenderer = " cons.com.epro.child.myComboxHeader "   />
                    
< mx:DataGridColumn headerText = " Column3 "  dataField = " Column3 "  width = " 90 "  wordWrap = " true "   headerRenderer = " cons.com.epro.child.myComboxHeader "   />
                    
< mx:DataGridColumn headerText = " Column4 "  dataField = " Column4 "  width = " 90 "  wordWrap = " true "   headerRenderer = " cons.com.epro.child.myComboxHeader " />
                    
< mx:DataGridColumn headerText = " Column5 "  dataField = " Column5 "  width = " 90 "  wordWrap = " true "   headerRenderer = " cons.com.epro.child.myComboxHeader " />
                    
< mx:DataGridColumn headerText = " Column6 "  dataField = " Column6 "  width = " 90 "  wordWrap = " true "   headerRenderer = " cons.com.epro.child.myComboxHeader " />
                    
< mx:DataGridColumn headerText = " Column7 "  dataField = " Column7 "  width = " 90 "  wordWrap = " true "   headerRenderer = " cons.com.epro.child.myComboxHeader " />
                    
< mx:DataGridColumn headerText = " Column8 "  dataField = " Column8 "  width = " 90 "  wordWrap = " true "   headerRenderer = " cons.com.epro.child.myComboxHeader " />  
                    
< mx:DataGridColumn headerText = " Column9 "  dataField = " Column9 "  width = " 90 "  wordWrap = " true "   headerRenderer = " cons.com.epro.child.myComboxHeader " />
                    
                
</ mx:columns >
            
</ mx:DataGrid >

for myCombox:

代码
<? xml version = " 1.0 "  encoding = " utf-8 " ?>
< s:MXDataGridItemRenderer xmlns:fx = " http://ns.adobe.com/mxml/2009 "  
                          xmlns:s
= " library://ns.adobe.com/flex/spark "  
                          xmlns:mx
= " library://ns.adobe.com/flex/mx "      
                          creationComplete
= " cc() "
                          focusEnabled
= " true " >
    
< fx:Script >
        
<! [CDATA[
            import flash.events.Event;
            
            import mx.collections.
* ;
            import mx.controls.Alert;
            import mx.controls.DataGrid;
            import mx.events.FlexEvent;
            import mx.events.IndexChangedEvent;
            import mx.events.ListEvent;
            import mx.events.ScrollEvent;
            
            import spark.events.IndexChangeEvent;

            
private  function cc(): void {
                
if (owner  is  DataGrid)
                    DataGrid(owner).addEventListener(
" scroll " , dXbrl_creationCompleteHandler);
            }
            
override   public  function  set  data(value:Object): void
            {
                
if (value  !=   null )
                {
                    super.data 
=  value;
                    
                    
                }   
            }            
            

            
protected  function dXbrl_creationCompleteHandler( event :ScrollEvent): void
            {
                var arr:ArrayCollection 
=  dXbrl.dataProvider  as  ArrayCollection;
                var isEquity:Boolean
= false ;
                
if (data.IsEquity)
                    isEquity
= true ;
                var i:
int = 0 ;
                
                
for (i = 0 ;i < arr.length;i ++ )
                {
                    
if (isEquity)
                    {
                        
if (arr[i].line_item == data.XbrlSelected)
                        {
                            dXbrl.selectedIndex
= i;
                            
break ;
                        }
                    }
                    
else {                        
                    
                        
if (arr[i].pdf_item == data.XbrlSelected)
                        {
                            dXbrl.selectedIndex
= i;
                            
break ;
                        }
                    }
                }
                dXbrl_changeHandler();
                
// data.dispatchEvent(event);
                
// dXbrl.selectedIndex=dXbrl.dataProvider.getItemIndex(data.XbrlSelected);
            }
            
            
protected  function dXbrl_changeHandler(): void
            {                
                data.XbrlSelected
= dXbrl.selectedItem.pdf_item;
                data.XbrlSelectedText
= dXbrl.selectedItem.pdf_item;
                data.XbrlSelectedValue
= dXbrl.selectedItem.line_item;
                
            }

        ]]
>
    
</ fx:Script >
    
    
< s:DropDownList id = " dXbrl "  labelField = " pdf_item "  dataProvider = " {data.Xbrl as ArrayCollection} "  width = " 100% "
                    creationComplete
= " dXbrl_creationCompleteHandler(null) "  change = " dXbrl_changeHandler() "
                    toolTip
= " {dXbrl.selectedItem.pdf_item} "    />
    
    
</ s:MXDataGridItemRenderer >

for myComboxHeader:

代码
<? xml version = " 1.0 "  encoding = " utf-8 " ?>
< s:MXDataGridItemRenderer xmlns:fx = " http://ns.adobe.com/mxml/2009 "  
                          xmlns:s
= " library://ns.adobe.com/flex/spark "  
                          xmlns:mx
= " library://ns.adobe.com/flex/mx "  
                          focusEnabled
= " true "  creationComplete = " cc() " >
    
< fx:Script >
        
<! [CDATA[
            import mx.collections.
* ;
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.controls.dataGridClasses.DataGridHeader;
            import mx.events.FlexEvent;
            
            import spark.events.IndexChangeEvent;
            [Bindable]
            
private  var headItems:ArrayCollection = new  ArrayCollection([
                {label:
" company " ,data: 1 },
                {label:
" group " ,data: 2 }
                ]);
            
private  var col:DataGridColumn = null ;
            
override   public  function  set  data(value:Object): void
            {                
                
if (value  !=   null )
                {
                    col 
=  (value  as  DataGridColumn);
                    super.data 
=  value;    
                }                
            }
            
override   public  function  get  data():Object{
                
return  headItems;
            }
            
protected  function cc(): void {                
                var dg:DataGrid 
= this .parent.parent  as  DataGrid;
                
if (col != null )
                    col.headerText
= dHeader.selectedItem.label;
            }
            
        ]]
>
    
</ fx:Script >
    
< s:layout >         
        
< s:VerticalLayout />
    
</ s:layout >     
    
    
< s:DropDownList id = " dHeader "  labelField = " label "  selectedIndex = " 0 "  width = " 80 "  dataProvider = " {headItems} "
                         change
= " cc() "   />     
</ s:MXDataGridItemRenderer >

其 中,itemRenderer不是问题,难点在HeaderRender上面,因为需要获取header上的ddl选择的值,而flex的 datagrid大家知道,他是不能像c#那样findControl的,所以我用了一个全局变量private var col:DataGridColumn=null;来存储当前是哪一列,然后将ddl的值绑定到该列的headerText上.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值