Flex List Control with Editable InputText ItemRenderer

Flex List Control with Editable InputText ItemRenderer

Posted on the June 13th, 2007 under Component, Flex, Flex Tips by Mister

I think the title of this post says it all.   I needed a InputText for the label of images in my TitleList control.  I wanted users to click on the text and edit it in place.  I started out creating a simple ItemRenderer with a InputText and skinned the InputText to look like a regular label until you click to edit the information.   I then decided to go a little further and make a custom control based on InputText which did all the style changes and kept broadcast a change event only when the text actually changes.   I also removed the extension from any titles (like myimage.jpg becomes myimage instead).

This was all fine and dandy until I used the component within the TileList.   You see, the List controls allow Alphanumeric keys as a form of navigation.  This is really cool because if you have images and titles below them, you can skip from image to image by typing the first letter of the image title.  However, this conflicted with the InputText.  Each time I clicked on a title to edit and started to type, the TitleList would navigate based on the character I typed.   This was not so cool. 

I ended up with a simple solution:

event.stopImmediatePropagation();

I used stopImmediatePropogation to prevent my keyDown events on the InputText from bubbling up to the List control.  Problem solved!  Here is a working example, right-click on the Flex application to get the code (I can’t tell you how many people post messages about how to get the Flex source code from examples, I mean, if you have to ask….).

 

ItemRendererEditor Example and Source

 

http://thanksmister.com/?p=63