datagrid 表头

http://blog.csdn.net/microrain/archive/2008/01/10/2032903.aspx

 

 

有的时候需要在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";

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/microrain/archive/2008/01/10/2032903.aspx