settingflex datafield with a function

I can't seem to get this right and everything I read is kind of like my problem but not quite. This seems like it would be pretty easy. All I want to do is set the value of a datafield using a function. I call in an xml file and can set the value of a datafield from that xml (in this case it's a category id as a number). But then I want to translate that number into a name by correlating it with a different data array.

so basically i just need to pass the catId into a function in the datafield but can't get it to work.

        <mx:DataGridColumn color="0x00101F"  textAlign="center" editable="true" id="categoryField"开发者_JS百科  headerText="CATEGORY" dataField="getCategoryName(@catId)"  editorDataField="text"></mx:DataGridColumn>

Look at the dataField="getCategoryName(@catId)" part of this datagrid column.

What is the proper syntax to do this?

ok, one more question, how do I access a variable i've defined in the main application from the itemrenderer. I tried outerdocument, but that doesn't seem to work.

UPATE: nevermind, have to use parentDocument.. thanks for the help.

UPDATE 2: Ok, one more time. Outerdocument does work, just need to remember to make any variables you want to access Public.

The quickest, easiest option is to use an Inline Item renderer:

<mx:DataGridColumn color="0x00101F"  textAlign="center" editable="true" id="categoryField" headerText="CATEGORY" editorDataField="text">
    <mx:itemRenderer>
        <mx:Component>
            <mx:Label text="{foo(data)}" />
            <mx:Script>
            <![CDATA[
                private function foo(data:Object):String
                {
                     // do something with data.@catId and return it..
                }
            ]]>
            </mx:Script>
        </mx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>