6.6.处理DataGrid/AdvancedDataGrid相关事件

本章用到的 Flex3中文教程--homesforsale.xml文件
6.6.1. 问题

我需要管理有DataGrid 和它的项渲染器发出的事件
6.6.2. 解决办法
使用项渲染器的owner 属性调度父组件DataGrid 的事件
6.6.3. 讨论
上一节中,通过传递类引用给column 的headerRenderer 属性,自定义列表头渲染器被创建出来。这一节将继续上一节的表头渲染器。当表头渲染器的复选框被点击时,该类将触发一个事件到父组件DataGrid。
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="verticalcreationComplete="initApp()">

<mx:HTTPService id="srvurl="assets/homesforsale.xml"
resultFormat="object"
result="onResult(event)"/>

<mx:Form>
<mx:FormItem label="City">
<mx:TextInput id="cityFilterchange="applyFilter()"/>
</mx:FormItem>
</mx:Form>
<mx:AdvancedDataGrid id="gridwidth="100%height="100%"
sortExpertMode="truedataProvider="{homesForSale}"
creationComplete="assignListeners()">

<mx:columns>
<mx:AdvancedDataGridColumn headerText="Total No."
dataField="total"/>

<mx:AdvancedDataGridColumn headerText="City"
sortable="false"
headerRenderer="CheckBoxHeaderRenderer2"
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;
}
//根据事件冒泡机制, 事件从DataGridColumn 传递到父组件DataGrid 。
// onColumnSelect方法将接收自定义事件ColumnSelectedEvent,它包含哪个表头渲染 器被使用的信息。
private function assignListeners():void {
this.grid.addEventListener(ColumnSelectedEvent.COLUMN_SELECTED,onColumnSelect);
}
private function
onColumnSelect(evt:ColumnSelectedEvent):void {
trace("column selected = " + evt.colIdx);
}

]]>
</mx:Script>
</mx:Application>

这个例子建立在上一节的例子之上,为CheckBoxHeaderRenderer2,代码赋值一个监听器给ColumnSelectedEvent,这个AdvancedDataGrid 的自定义事件,监听器函数onColumnSelected只是在控制台输出被选择的列索引值,下面的代码为CheckBoxHeaderRenderer2:

+展开
-ActionScript
package {
import flash.events.MouseEvent;
import mx.controls.AdvancedDataGrid;
import mx.controls.CheckBox;
import
mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;
public class CheckBoxHeaderRenderer2 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);
this.selector.addEventListener( MouseEvent.CLICK,
dispatchColumnSelected);
}
override protected function
updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
this.selector.setActualSize(this.selector.getExplicitOrMeasuredWi
dth(), this.selector.getExplicitOrMeasuredHeight());
}
private function
dispatchColumnSelected(evt:MouseEvent):void {
var event:ColumnSelectedEvent =
new ColumnSelectedEvent(
ColumnSelectedEvent.COLUMN_SELECTED,
listData.columnIndex,
selector.selected);
AdvancedDataGrid(listData.owner).dispatchEvent(event);
}
}
}

注意这里,虽然ColumnSelectedEvent 最后是由AdvancedDataGrid 发出的,但最初它是当复选框被点击时由表头渲染器实例发出的。CheckBoxHeaderRenderer2 的dispatchColumnSelected 方法使用listData.owner 属性得到父组件AdvancedDataGrid 的引用,接着从"owner"处触发此事件。

+展开
-ActionScript
AdvancedDataGrid(listData.owner).dispatchEvent(event);

最后我们看一下自定义事件类CustomSelectedEvent。它简单继承自Event 类和两个属性:colIdx 存储列索引,isSelected 指示是否列被选择:
+展开
-ActionScript
package {
import flash.events.Event;
public class ColumnSelectedEvent extends Event {
public var colIdx:int;
public var isSelected:Boolean;
public static const COLUMN_SELECTED:String =
"columnSelected";
public function
ColumnSelectedEvent(type:String,colIdx:Int,isSelected:
Boolean) {
super(type);
// Set the new property.
this.colIdx = colIdx;
this.isSelected = isSelected;
}
override public function clone():Event {
return new ColumnSelectedEvent(type, colIdx,isSelected);
}
}
}

加支付宝好友偷能量挖...


评论(0)网络
阅读(128)喜欢(0)flash/flex/fcs/AIR