User input in datagrid with custom component

Question

Hi guys and girls,

I Would like to narrow down my problem as follows:

1) I have a datagrid where one of the columns is rendered using a symbol containing an input text control as well as a static text control which looks almost like this: [],000 (where '[]' implies the input textbox.
2) my cell renderer renders the column correctly. I see the input textbox and the label and the textbox displays the values as inserted by the dataprovider (array)
3) I can get and set the input textbox values in code but what I can't do:
4) I can't type new values using the keyboard. It's like the cell / symbol does not accept keyboard events.

Herewith some sample code:

package { 
import flash.display.MovieClip; 
import flash.events.FocusEvent;
import flash.text.TextField; 
import fl.controls.listClasses.ICellRenderer; 
import fl.controls.listClasses.ListData; 
import flash.events.MouseEvent;
import flash.events.Event;


public class MyCellRenderer extends MovieClip implements ICellRenderer { 
    private var _listData:ListData; 
    private var _data:Object; 
    private var _selected:Boolean; 

    public function MyCellRenderer() { 
        //glowFilter = new GlowFilter(0xFFFF00); 
        //setInterval(toggleFilter, 200); 
       addEventListener(FocusEvent.FOCUS_OUT, onFocusOut);
       addEventListener(FocusEvent.FOCUS_IN, onFocusIn);
  } 

  function onFocusOut(evt:FocusEvent):void{
   trace("focus out");
   trace(_data.label.toString());
  }
  function onFocusIn(evt:FocusEvent):void{
   trace("focus in");
   trace(_data.label.toString());
   TextField.text = "bleg";
  }
     public function set data(d:Object):void { 
        _data = d; 
        TextField.text = d.label; 
    } 
    public function get data():Object { 
        return _data; 
    } 
    public function set listData(ld:ListData):void { 
        _listData = ld; 
    } 
    public function get listData():ListData { 
        return _listData; 
    } 
    public function set selected(s:Boolean):void { 
        _selected = s; 
    } 
    public function get selected():Boolean { 
        return _selected; 
    } 
    public function setSize(width:Number, height:Number):void { 
    } 
    public function setStyle(style:String, value:Object):void { 
    } 
    public function setMouseState(state:String):void{ 
    } 
} 
}    

Should I be using a custom itemEditor for the column and set column editable to true? Any help or direction would be highly appreciated!