自定义AdvancedDataGridHeaderRenderer

 要给AdvancedDataGrid加一个自定义的过滤功能，在界面上需要在每列的表头加上一个漏斗图标，点击该图标就弹出一个对话框，设置过滤条件。在点击表头其它的地方照样实现默认的排序功能。这里关键在于实现自定义的AdvancedDataGridHeaderRenderer。显然直观感受是继承该对象，然后在构造函数中增加一个Image对象，给Image对象增加Click事件的监听，从而在弹出点击漏斗图标时能够弹出对话框。

 

在增加图片过程中，我直接在构造函数中利用addChild方法增加一个Image对象，结果怎么都不能显示图标。但是我用FlexSpy (一个Flex的监视工具，我觉得不能叫调试，功能类似Firefox下面的Firebug，但感觉还差很远，不过在查看界面控件结构树还是有帮助的，推荐一下:))查看的确可以看到该图标，而且点击以下图标就显示出来了。因此很有可能是界面刷新显示的问题。但是也不知道具体什么原因。后来在网上搜索发现其他人都覆盖了updateDisplay方法，并且在里面加了类似这么一行代码：

 

img.setActualSize(img.getExplicitOrMeasuredWidth(), img.getExplicitOrMeasuredHeight());

 

后来一试果然能够正常显示。但是headerText又显示不出来。怎么回事？原来我覆盖了data这个属性，不知道这个简单的覆盖有什么问题。去掉之后就一切ok了。具体代码如下：

package { import flash.events.Event; import flash.events.MouseEvent; import mx.controls.Alert; import mx.controls.CheckBox; import mx.controls.Image; import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn; import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer; public class MyAdvancedDataColumnHeaderRender extends AdvancedDataGridHeaderRenderer { [Embed(source="eclipse.gif")] private var c : Class; private var img : Image = new Image(); public function MyAdvancedDataColumnHeaderRender() { super(); img.source = "eclipse.gif"; img.addEventListener(MouseEvent.CLICK, function (event:Event):void{Alert.show("Filter", "Filter")}); this.addChild(img); } protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ img.setActualSize(img.getExplicitOrMeasuredWidth(), img.getExplicitOrMeasuredHeight()); super.updateDisplayList(unscaledWidth, unscaledHeight); } } }

 

你会发现这个代码里面点击图标也会调用默认的就排序，这不是我们希望的。而关键在于点击事件会触发datagrid的headerRelease事件，这又会导致默认的排序。要解决这个问题需要搞清楚这个headerRelease事件是怎么来的，其实它就是监听了mouse-up事件，一旦发现在header上面有这个时间自然就是headerRelease了。因此我们要做的事情就是在点击过滤图标的时候将mouse-up事件禁止，不让它再往上传。修改之后代码如下：

package { import flash.events.Event; import flash.events.MouseEvent; import mx.controls.Alert; import mx.controls.Image; import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer; public class MyAdvancedDataColumnHeaderRender extends AdvancedDataGridHeaderRenderer { [Embed(source="eclipse.gif")] private var c : Class; private var img : Image = new Image(); public function MyAdvancedDataColumnHeaderRender() { super(); img.source = "eclipse.gif"; img.addEventListener(MouseEvent.MOUSE_UP, function (event:Event):void{ Alert.show("Filter", "Filter"); event.stopImmediatePropagation(); }); this.addChild(img); } protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ img.setActualSize(img.getExplicitOrMeasuredWidth(), img.getExplicitOrMeasuredHeight()); super.updateDisplayList(unscaledWidth, unscaledHeight); } } }