How to create a popup window from an ItemEditor

I was recently helping a client that needed to create an item editor that would allow them to update the text field of a data grid, which also rendered an Icon that the user could click to create a comment line. Clicking the comment Icon would bring up a popup window to edit the comments. When the popup window was dismissed, the UI should show the ItemEditor in a state to allow the user to complete the editing of the original DataGrid item.

In their initial implementation they did not use the ItemEditEnd event from the DataGrid, because they noticed that when the popup window was created the ItemEditEnd event would fire and Flex would go through the entire process of ending the editing session. Clearly not what they wanted. The client went through a number of 'workarounds' but they always avoided the ItemEditEnd event.

I think trying to circumvent the cell editing process is almost always a bad idea that leads to code that will break as new releases of the Flex framework come out, and will certainly confuse developers that have to maintain the code. So I set off trying to create a simplified example of two options for them, one of which was a popup window. Since it was sufficiently tricky - I thought there may be others out there that would benefit from this example.

Below is a working example of what I put together. In the top DataGrid, I setup the comment editor to NOT use a popup window and instead just toggle between a textinput to edit the cell data, and a textinput to edit the comment line. Personally I find the popup window awkward to the user experience - but that was the client requirement. The second DataGrid is a simplified version of the required popup window. Notice that it only allows for a single line and takes the return key as the single to end editing the comment.

You can find the code for this example here