[Flex]自定义DataGrid组件的标题

 
  有的时候需要在DataGrid组件中为每列显示两行的标题。要实现它，其实并不难。在DataGridColumn 类中有一个headerRenderer 属性，所以我们可以使用它来完成。

MXML代码如下：

    Actionscript: <?xmlversion="1.0"encoding="utf-8"?>
    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"horizontalAlign="left"paddingLeft="3"verticalGap="5">
       </mx><mx :Script>
         <![CDATA[
           
           importmx.controls.dataGridClasses.DataGridColumn;
           
           [Bindable]
           privatevar text:String;
           [Bindable]
           privatevar topText:String;
           [Bindable]
           privatevar src:String;
           
           override publicfunction setdata(value:Object):void
           {
             var col:DataGridColumn = value as DataGridColumn;
             if(col)
             {
               var arr:Array= col.headerText.split(':::');
               text= arr[0];
               topText = arr[1];
             }
           }
         ]]>
       </mx>
       <mx :Label id="topTextLbl"text="{topText}"fontWeight="bold"/>
   <mx :Label id="txtLbl"text="{text}"fontWeight="bold"/>

再创建DataGrid的扩展类，代码如下：

     package  controls
     ... {
       importmx.controls.DataGrid;
       importmx.controls.dataGridClasses.DataGridColumn;
       importmx.core.ClassFactory;
       
       publicclass MyDataGrid extendsDataGrid
       ...{
         publicfunction MyDataGrid()
         ...{
           
         }
       
         override protected function commitProperties():void
         ...{
           super.commitProperties();
           
           draggableColumns = false;
           editable = false;
           resizableColumns = true;
           sortableColumns = true;
     
           var colName:DataGridColumn = new DataGridColumn();
           colName.headerRenderer= new ClassFactory(MyDataGridHeader);
           colName.headerText= "Name:::Web";
           colName.dataField= "name";
           
           var colLink:DataGridColumn = new DataGridColumn();
           colLink.headerRenderer= new ClassFactory(MyDataGridHeader);
           colLink.headerText= "Link:::URL";
           colLink.dataField= "link";
           
           columns = [colName, colLink];
         }
       }
    }

OK，现在创建一个应用来测试一下刚刚建立的扩展组件。

     <? xmlversion="1.0"encoding="utf-8" ?>
     < mx  :Application xmlns:local ="*" xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" xmlns:controls ="controls.*" >
     
          < controls  :MyDataGrid width ="300" rowCount ="5" dataProvider ="{dp}" />
         
          </ mx >< mx  :Script >
            <![CDATA[
             importmx.collections.ArrayCollection;
             [Bindable]
             publicvar dp:ArrayCollection = new ArrayCollection([{name:'Franto.com Blog',url:'http://blog.franto.com'},{name:'Adobe.com Labs',url:'http://labs.adobe.com'}]);
            ]]>
          </ mx >  

上面的这种情况是固定的自定义标题，如果有多个列都想自定义，怎么办？我们可以扩展DataGridColumn类， 编写一个MyDataGridColumn类来添加这些自定义的属性。在这个例子里我们设置两个属性 text 和 topText。

     package  controls
     ... {
       importmx.controls.dataGridClasses.DataGridColumn;
     
       publicclass MyDataGridColumn extendsDataGridColumn
       ...{
          privatevar _text:String;
          privatevar _topText:String;
     
         publicfunction gettext():String
         ...{
           return_text;
         }
         publicfunction settext(value:String):void
         ...{
           _text = value;
         }
         publicfunction gettopText():String
         ...{
           return_topText;
         }
         publicfunction settopText(value:String):void
         ...{
           _topText = value;
         }
       }
    }

很简单吧，现在你可以在MyDataGrid类中改变你的commitProperties ，代码如下：

     var  colName:MyDataGridColumn  =   new  MyDataGridColumn();
       colName.headerRenderer =   new  ClassFactory(MyDataGridHeader);
       colName.text =   " Name " ;
       colName.topText =   " Web " ;
       colName.dataField =   " name " ;
           
        var  colLink:MyDataGridColumn  =   new  MyDataGridColumn();
       colLink.headerRenderer =   new  ClassFactory(MyDataGridHeader);
       colLink.text =   " Link " ;
       colLink.topText =   " URL " ;
   colLink.dataField =   " url " ; 

 

在线演示 右键点演示的例子可以下载全部源代码。