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上.