Flex - Double Click to edit functionality for List Control

When for a list control the property editable is set to true, one can click on the item and rename the label or edit the item if an item editor is set. Here is a work around if you wish to enable editing only on double-click:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init();">

<mx:Script>
<![CDATA[

import mx.events.ListEvent;
import mx.core.EventPriority;

private function init():void {
myList.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, onItemDoubleClick, 
			false, EventPriority.DEFAULT_HANDLER);
myList.addEventListener(ListEvent.ITEM_EDIT_END, onItemEditEnd, 
			false, EventPriority.DEFAULT_HANDLER);
}

private function onItemDoubleClick(event:ListEvent):void {
if (event.itemRenderer.data == "One") {
return;
}
if (event.isDefaultPrevented()) {
return;
}
myList.editable = true;
myList.editedItemPosition = {columnIndex:0, rowIndex:event.rowIndex};
}

private function onItemEditEnd(event:ListEvent):void {
myList.editable = false;
}
]]>
</mx:Script>

<mx:ArrayCollection id="myData">
<mx:String>One</mx:String>
<mx:String>Two</mx:String>
<mx:String>Three</mx:String>
<mx:String>Four</mx:String>
</mx:ArrayCollection>

<mx:Label text="Doubleclick any item to edit…"/>
<mx:List id="myList" doubleClickEnabled="true" dataProvider="{myData}" width="200"/>

</mx:Application>

Click here for live example.

Let me know incase of any bugs…

About these ads