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