有的时候需要在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"/>
<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];
}
}
}
{
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 >
< 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;
}
}
}
{
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 " ;
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 " ;
在线演示 右键点演示的例子可以下载全部源代码。