Adding double click event to v2 list, tree, and datagrid

The v2 list-based components don't have an event for letting a user double click a row in the list. That's changed as of today.

Consider the following code snippet:

// Double-Click Hack for List-based components
// Nov. 15, 2004 - Darron Schall

// create quick reference to ScrollSelectList's prototype
var sslp = _global.mx.controls.listclasses.ScrollSelectList.prototype;

// only run this code once.., make sure that $oldOnRowPress is not
// defined to avoid inifinite recursion when onRowPress is called
if (!sslp.$oldOnRowPress) {
	sslp.DOUBLE_CLICK_INTERVAL = 300; 	// in milliseconds, how close two clicks must 
											// be received to register as a double click

	// save a reference to the onRowPress function since we need to overwrite it to add 
	// functionality, and we don't want to lose the original.
	sslp.$oldOnRowPress = sslp.onRowPress;
	
	// add doubleClick event to the ScrollSelectList class
	sslp.onRowPress = function(rowIndex) {
		// if the user pressed the samw row within the time limit, fire off
		if (getTimer() - this.lastPressedTime < this.DOUBLE_CLICK_INTERVAL && this.lastPressedRow == rowIndex) {

			this.dispatchEvent({target:this,type:"doubleClick",row:rowIndex});
		} else {
			// not a double click - record their click time and the row selected to prepare
			// for double click
			
			// only allow double clicks under the proper conditions
			if (this.enabled && this.selectable) {
				this.lastPressedTime = getTimer();
				this.lastPressedRow = rowIndex;
			} else {
				// not really necessary, but just in case.. make sure
				// doubleClick doesn't accidentally fire
				this.lastPressedTime = 0;
				this.lastPressedRow = -1;
			}
			
			// invoke the old method that we just overwrote - using apply to get the scope correct
			this.$oldOnRowPress.apply(this, [rowIndex]);
		}
	};
}
delete sslp;

The basic premise is that when an item is clicked in a list-based component, the onRowPress method is called (see SelectableRow.as). The onRowPress method is defined in ScrollSelectList and is in charge of determining if a row can be selected, then firing off the change event as necessary (which is done in selectRow).

In order to add the double click event, we replace the onRowPress in ScrollSelectList with one that times press events. If the same row was pressed 2 times within a certain interval, we can fire off the double click event. We also make sure to call the original onRowPress (that we saved in $oldOnRowPress) in order to keep current functionality working.

In order for this to work, place the above code snippet on a frame after the export frame for the classes in your movie. The code modifes the ScrollSelectList class at runtime, so ScrollSelectList must be loaded before this code executes. Typically, you can just drag a list on the stage and place this code in frame 1 since the default export for classes is before frame 1.

Then, you can listen for a new event - "doubleClick" - from List, Tree, and DataGrid components. Anything that inherits from ScrollSelectList now has a doubleClick event. Sample usage is as follows:

// drag v2 list component onto stage and name it "list"
// place above code on frame 1 followed by below code:
list.dataProvider = [{label:"test"},{label:"test2"},{label:"test3"}];
list.addEventListener("doubleClick", mx.utils.Delegate.create(this, onItemSelected));
function onItemSelected(eventObj) {
 	// do something with the selected item
	trace("double click");
}

Yup, this is a hack.. As always, your mileage may vary.

Good luck, and enjoy!