6.5.为AdvancedDataGrid创建自定义表头
本章用到的 Flex3中文教程--homesforsale.xml文件
6.5.1. 问题
我想用一个复选框作为DataGrid 表头
6.5.2. 解决办法
继承AdvancedDataGridHeaderRenderer 类,并重写createChildren 和updateDisplayList 方法
6.5.3. 讨论
这一节根据上一节例子为city DataGridColumn 增加自定义表头渲染器。创建标题渲染器和创建项渲染器或项编辑器基本类似。一个实现IFactory 接口的类引用被传递给DataGridColumn 的headerRenderer 属性,这个例子使用CheckBoxHeaderRenderer 渲染器创建带有复选框的列表头:
下面的代码就是自定义表头渲染器类CheckBoxHeaderRenderer 。注意它重写了AdvancedDataGridHeader 的createChildren 方法来创建新的CheckBox 实例并添加到显示列表。updateDisplayList 方法用来重新计算复选框大小,下一节介绍如何处罚自定义表头事件及处理细节。
6.5.1. 问题
我想用一个复选框作为DataGrid 表头
6.5.2. 解决办法
继承AdvancedDataGridHeaderRenderer 类,并重写createChildren 和updateDisplayList 方法
6.5.3. 讨论
这一节根据上一节例子为city DataGridColumn 增加自定义表头渲染器。创建标题渲染器和创建项渲染器或项编辑器基本类似。一个实现IFactory 接口的类引用被传递给DataGridColumn 的headerRenderer 属性,这个例子使用CheckBoxHeaderRenderer 渲染器创建带有复选框的列表头:
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" creationComplete="initApp()">
<mx:HTTPService id="srv" url="assets/homesforsale.xml"
resultFormat="object" result="onResult(event)"/>
<mx:Form>
<mx:FormItem label="City">
<mx:TextInput id="cityFilter" change="applyFilter()"/>
</mx:FormItem>
</mx:Form>
<mx:AdvancedDataGrid id="grid" width="100%" height="100%"
sortExpertMode="true" dataProvider="{homesForSale}">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Total No."
dataField="total"/>
<mx:AdvancedDataGridColumn headerText="City"
sortable="false"
headerRenderer="CheckBoxHeaderRenderer"
dataField="city"/>
<mx:AdvancedDataGridColumn
headerText="State dataField="state"/>
<mx:AdvancedDataGridColumn headerText="Price Ranges
[<350K] [350K -600K] [>600K]" dataField="range"
itemRenderer="RangeRenderer" sortCompareFunction="sortRanges"/>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var homesForSale:ArrayCollection;
private function initApp():void {
this.srv.send();
}
private function onResult(evt:ResultEvent):void {
this.homesForSale = evt.result.data.region;
}
private function sortRanges(obj1:Object,
obj2:Object):int{
var value1:Number = obj1.range.range1;
var value2:Number = obj2.range.range1;
if(value1 < value2) {
return -1;
}
else if(value1 > value2){
return 1;
}
else {
return 0;
}
}
private function applyFilter():void {
if(this.homesForSale.filterFunction == null) {
this.homesForSale.filterFunction =
this.filterCities;
}
this.homesForSale.refresh();
}
private function filterCities(item:Object):Boolean {
var match:Boolean = true;
if(cityFilter.text != "") {
var city:String = item["city"];
var filter:String = this.cityFilter.text;
if(!city ||
city.toLowerCase().indexOf(filter.toLowerCase()) < 0) {
match = false;
}
}
return match;
}
]]>
</mx:Script>
</mx:Application>
layout="vertical" creationComplete="initApp()">
<mx:HTTPService id="srv" url="assets/homesforsale.xml"
resultFormat="object" result="onResult(event)"/>
<mx:Form>
<mx:FormItem label="City">
<mx:TextInput id="cityFilter" change="applyFilter()"/>
</mx:FormItem>
</mx:Form>
<mx:AdvancedDataGrid id="grid" width="100%" height="100%"
sortExpertMode="true" dataProvider="{homesForSale}">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Total No."
dataField="total"/>
<mx:AdvancedDataGridColumn headerText="City"
sortable="false"
headerRenderer="CheckBoxHeaderRenderer"
dataField="city"/>
<mx:AdvancedDataGridColumn
headerText="State dataField="state"/>
<mx:AdvancedDataGridColumn headerText="Price Ranges
[<350K] [350K -600K] [>600K]" dataField="range"
itemRenderer="RangeRenderer" sortCompareFunction="sortRanges"/>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var homesForSale:ArrayCollection;
private function initApp():void {
this.srv.send();
}
private function onResult(evt:ResultEvent):void {
this.homesForSale = evt.result.data.region;
}
private function sortRanges(obj1:Object,
obj2:Object):int{
var value1:Number = obj1.range.range1;
var value2:Number = obj2.range.range1;
if(value1 < value2) {
return -1;
}
else if(value1 > value2){
return 1;
}
else {
return 0;
}
}
private function applyFilter():void {
if(this.homesForSale.filterFunction == null) {
this.homesForSale.filterFunction =
this.filterCities;
}
this.homesForSale.refresh();
}
private function filterCities(item:Object):Boolean {
var match:Boolean = true;
if(cityFilter.text != "") {
var city:String = item["city"];
var filter:String = this.cityFilter.text;
if(!city ||
city.toLowerCase().indexOf(filter.toLowerCase()) < 0) {
match = false;
}
}
return match;
}
]]>
</mx:Script>
</mx:Application>
下面的代码就是自定义表头渲染器类CheckBoxHeaderRenderer 。注意它重写了AdvancedDataGridHeader 的createChildren 方法来创建新的CheckBox 实例并添加到显示列表。updateDisplayList 方法用来重新计算复选框大小,下一节介绍如何处罚自定义表头事件及处理细节。
+展开
-ActionScript
package {
import flash.events.Event;
import mx.controls.AdvancedDataGrid;
import mx.controls.CheckBox;
import
mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;
import mx.events.AdvancedDataGridEvent;
public class CheckBoxHeaderRenderer extends
AdvancedDataGridHeaderRenderer {
private var selector:CheckBox;
override protected function createChildren():void {
super.createChildren();
this.selector = new CheckBox();
this.selector.x = 5;
this.addChild(this.selector);
}
override protected function
updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
this.selector.setActualSize(
this.selector.getExplicitOrMeasuredWidth(),
this.selector.getExplicitOrMeasuredHeight());
}
}
}
import flash.events.Event;
import mx.controls.AdvancedDataGrid;
import mx.controls.CheckBox;
import
mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;
import mx.events.AdvancedDataGridEvent;
public class CheckBoxHeaderRenderer extends
AdvancedDataGridHeaderRenderer {
private var selector:CheckBox;
override protected function createChildren():void {
super.createChildren();
this.selector = new CheckBox();
this.selector.x = 5;
this.addChild(this.selector);
}
override protected function
updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
this.selector.setActualSize(
this.selector.getExplicitOrMeasuredWidth(),
this.selector.getExplicitOrMeasuredHeight());
}
}
}
加支付宝好友偷能量挖...