<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/03/creating-a-multiline-spark-checkbox-control-in-flex-4/ -->
<s:Application name="Spark_CheckBox_skin_maxDisplayedLines_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:datagrid="datagrid.*">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var griddata : ArrayCollection = new ArrayCollection(
[ {name:"每月支出",order:1, status:"启用", selected:true,imgUrl:"favorites.png", startTime:"2010-12-01",stopTime:"2010-12-01",description:"没有描述"},
{name:"每月支出",order:2, status:"禁用", selected:false,imgUrl:"favorites.png", startTime:"2010-12-01",stopTime:"2010-12-01",description:"没有描述"}
]
);
protected function ch_clickHandler(event:MouseEvent):void
{
for each(var o : Object in _dataGrid.dataProvider)
{
o["selected"] = ch.selected;
}
_dataGrid.invalidateList();
}
]]>
</fx:Script>
<s:VGroup>
<s:CheckBox id="ch" click="ch_clickHandler(event)"
skinClass="skins.CustomCheckBoxSkin"
width="200"
/>
<mx:DataGrid id="_dataGrid" allowDragSelection="true" allowMultipleSelection="true" dataProvider="{griddata}"
width="80%" height="100%" resizableColumns="true" dragEnabled="true" dropEnabled="true"
>
<mx:columns>
<datagrid:CheckBoxHeaderColumn id="dataheader" headerText="选择"
dataField="selected"/>
<mx:DataGridColumn headerText="名称" dataField="name" />
<mx:DataGridColumn headerText="简称" dataField="simpleName" />
<mx:DataGridColumn headerText="状态" dataField="status" />
<mx:DataGridColumn headerText="启用时间" dataField="startTime" />
<mx:DataGridColumn headerText="停用时间" dataField="stopTime" />
<mx:DataGridColumn headerText="描述" dataField="description" />
</mx:columns>
</mx:DataGrid>
</s:VGroup>
</s:Application>
package datagrid
{
import mx.controls.dataGridClasses.DataGridColumn;
import mx.core.ClassFactory;
[Event(name="click", type="flash.events.MouseEvent")]
public class CheckBoxHeaderColumn extends DataGridColumn
{
public function CheckBoxHeaderColumn(columnName:String=null)
{
super(columnName);
// headerRenderer = new ClassFactory(CheckBoxHeaderRenderer);
// itemRenderer = new ClassFactory(CheckBoxItemRenderer);
itemRenderer = new ClassFactory(CheckBoxImageItemRenderer);
headerRenderer = new ClassFactory(CheckBoxImageHeaderRenderer);
}
/**is the checkbox selected**/
public var selected:Boolean = false;
}
}
CheckBoxImageHeaderRenderer
<?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="mxdatagriditemrenderer1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.controls.DataGrid;
import mx.events.FlexEvent;
private var column:CheckBoxHeaderColumn;
private var dg:DataGrid;
protected function check_clickHandler(event:MouseEvent):void
{
if (listData)
{
dg = DataGrid(listData.owner);
for each(var o : Object in dg.dataProvider)
{
o[column.dataField] = check.selected ;
}
dg.invalidateList();
}
}
protected function mxdatagriditemrenderer1_creationCompleteHandler(event:FlexEvent):void
{
dg = DataGrid(listData.owner);
column = dg.columns[listData.columnIndex];
column.addEventListener("click", clickHandler);
}
protected function clickHandler(event:MouseEvent):void
{
var b1 : Boolean = false;
var b2 : Boolean = false;
for each(var o : Object in dg.dataProvider)
{
if(o[column.dataField])
{
b1 = true;
}
else
{
b2 = true;
}
}
if(b1 && !b2)
{
check.selected = true;
}else{
check.selected = false;
}
}
]]>
</fx:Script>
<s:HGroup horizontalCenter="0">
<s:CheckBox id="check" click="check_clickHandler(event)"/>
<s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{dataGridListData.label}" />
</s:HGroup>
</s:MXDataGridItemRenderer>
CheckBoxImageItemRenderer:
<?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">
<fx:Script>
<![CDATA[
import mx.controls.DataGrid;
private var column:CheckBoxHeaderColumn;
protected function checkbox1_clickHandler(event:MouseEvent):void
{
data[column.dataField]= check.selected;
column.dispatchEvent(event);
}
override public function set data(value:Object):void
{
super.data = value;
if (listData)
{
var dg:DataGrid = DataGrid(listData.owner);
column = dg.columns[listData.columnIndex];
check.selected = data[column.dataField];
if(img){
img.source = data["imgUrl"];
}
}
}
]]>
</fx:Script>
<s:HGroup horizontalCenter="0">
<s:CheckBox id="check" click="checkbox1_clickHandler(event)"/>
<mx:Image id="img" />
</s:HGroup>
<!--<s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{dataGridListData.label}" />-->
</s:MXDataGridItemRenderer>
