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

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

MXML代码如下：

Actionscript:<?xmlversion="1.0"encoding="utf-8"?>
<mx:VBoxxmlns:mx="http://www.adobe.com/2006/mxml"horizontalAlign="left"paddingLeft="3"verticalGap="5">
</mx><mx:Script>
<![CDATA[

importmx.controls.dataGridClasses.DataGridColumn;

[Bindable]
privatevartext:String;
[Bindable]
privatevartopText:String;
[Bindable]
privatevarsrc:String;

overridepublicfunctionsetdata(value:Object):void
{
varcol:DataGridColumn=valueasDataGridColumn;
if(col)
{
vararr:Array=col.headerText.split(':::');
text=arr[0];
topText=arr[1];
}
}
]]>
</mx>
<mx:Labelid="topTextLbl"text="{topText}"fontWeight="bold"/>
<mx:Labelid="txtLbl"text="{text}"fontWeight="bold"/>

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

package controls
... {
importmx.controls.DataGrid;
importmx.controls.dataGridClasses.DataGridColumn;
importmx.core.ClassFactory;

publicclassMyDataGridextendsDataGrid
...{
publicfunctionMyDataGrid()
...{

}

overrideprotectedfunctioncommitProperties():void
...{
super.commitProperties();

draggableColumns=false;
editable=false;
resizableColumns=true;
sortableColumns=true;

varcolName:DataGridColumn=newDataGridColumn();
colName.headerRenderer=newClassFactory(MyDataGridHeader);
colName.headerText="Name:::Web";
colName.dataField="name";

varcolLink:DataGridColumn=newDataGridColumn();
colLink.headerRenderer=newClassFactory(MyDataGridHeader);
colLink.headerText="Link:::URL";
colLink.dataField="link";

columns=[colName,colLink];
}
}
}

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

<? xmlversion="1.0"encoding="utf-8" ?>
< mx :Applicationxmlns:local ="*" xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" xmlns:controls ="controls.*" >

< controls :MyDataGridwidth ="300" rowCount ="5" dataProvider ="{dp}" />

</ mx >< mx :Script >
<![CDATA[
importmx.collections.ArrayCollection;
[Bindable]
publicvardp:ArrayCollection=newArrayCollection([{name:'Franto.comBlog',url:'http://blog.franto.com'},{name:'Adobe.comLabs',url:'http://labs.adobe.com'}]);
]]>
</ mx >

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

package controls
... {
importmx.controls.dataGridClasses.DataGridColumn;

publicclassMyDataGridColumnextendsDataGridColumn
...{
privatevar_text:String;
privatevar_topText:String;

publicfunctiongettext():String
...{
return_text;
}
publicfunctionsettext(value:String):void
...{
_text=value;
}
publicfunctiongettopText():String
...{
return_topText;
}
publicfunctionsettopText(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 " ;

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