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

搜索了N多资料，摸索了好久，总算搞定了

 

 

 

转载于:https://www.cnblogs.com/4kapple/archive/2010/11/11/1874887.html