Listening to custom events from itemRender with Flex 3.3 ( bubble events )
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Server Controls like DataGrid,DataGridView , DataList etc have other controls inside them.
Example an DataGridView can have an TextBox or an button inside it.
These Child Controls can not raize events by themselves,but they pass the event to the parent control (DataGridView), which is passed to the page as event.
This process is known as EventBubbling.
In Flex 3 you could have this issue when you’re using custom itemRenderer because sometimes you need to use something like a button to delete an entry of a list or something like that.
This is the itemRenderer we’re using:
<?xml version="1.0" encoding="utf-8"?> <mx:HBox mouseOver="but.visible=true" mouseOut="but.visible=false" xmlns:mx="http://www.adobe.com/2006/mxml" > <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] [Embed(source="assets/static/consolesimg/xbox360_mini.png")] private var gs0:Class; [Bindable] [Embed(source="assets/static/consolesimg/wii_mini.png")] private var gs1:Class; [Bindable] [Embed(source="assets/static/consolesimg/ps3_mini.png")] private var gs2:Class; [Bindable] [Embed(source="assets/static/consolesimg/DS_mini.png")] private var gs3:Class; [Bindable] [Embed(source="assets/static/consolesimg/pc_mini.png")] private var gs4:Class; [Bindable] private var arr:Array = new Array ( gs0, gs1, gs2, gs3, gs4 ); [Bindable] private var arrcoll:ArrayCollection = new ArrayCollection( arr ); ]]> </mx:Script> <mx:Image source="{arrcoll.getItemAt(data.console_id-1)}" width="30" height="30" /> <mx:Label text="{data.network_id}" /> <mx:Button right="1" id="but" click="this.dispatchEvent( new Event('Delete') )" verticalCenter="0" visible="false" label="X" /> </mx:HBox>
And this is the parent list:
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" horizontalAlign="center" > <mx:Script> <![CDATA[ import mx.events.CloseEvent; import mx.controls.Alert; [Bindable] private var _totalconsole:int; public static const DELETE_CONSOLE:String = "DelConsole"; public static const NEW_CONSOLE:String = "NewConsole"; public function set totalconsole(val:int):void { _totalconsole = val; } public function get totalconsole():int { return _totalconsole; } private function checkDeleting(event:Event = null):void { Alert.show( "Do you want to delete this item?", "Delete Item", 3, this, confirmDelete); } private function confirmDelete(event:CloseEvent = null):void { if(event.detail == Alert.YES) this.dispatchEvent( new Event( DELETE_CONSOLE ) ); else Alert.show("Please do not waste my time"); } private function createForm(event:Event=null):void { this.dispatchEvent( new Event( NEW_CONSOLE ) ); } ]]> </mx:Script> <mx:DefaultListEffect id="myDLE" fadeOutDuration="1000" color="0xCD7F32"/> <mx:List itemsChangeEffect="{myDLE}" itemRenderer="view.components.profileComponents.userprofileComponents.renderers.conIR" id="listaconsole" width="195" height="190" creationComplete="listaconsole.addEventListener('Delete',checkDeleting,true,0,true) " /> </mx:VBox>
As you can see we add to the container an EventListener and that’s it. Of course this is just one event, you can create a private function and add there all the events you like.
