Question

I am declaring a variable outside the itemRenderer fx:Script body. However when I am setting it as such in my itemRenderer:

test_Var = data.@field_value;

It is giving an error “Access of undefined property test_Var”

Can I have 2 bodies, one inside the itemrenderer and the usual outside one?

    public var test_Var:Number = new Number();
    public function useVariableValue():void{
   // I will use the variable value in this function..
}
        ]]>
                                    </fx:Script>




    <mx:DataGrid id="myDG" rowCount="8" creationComplete="myDG_creationCompleteHandler(event)" resizableColumns="false" height="234">
                <mx:columns>
                    <mx:DataGridColumn headerRenderer="renderers.datagridHeaderRenderer" dataField="@field_label" headerText="Header1" width="130" />
                    <mx:DataGridColumn dataField="@field_value" headerText="Header2" itemRenderer="renderers.labelItemRenderer1" />
                    <mx:DataGridColumn headerText="Header3">
                        <mx:itemRenderer>
                            <fx:Component>
                                <mx:Canvas dataChange="canvas1_dataChangeHandler(event)">
                                    <s:Button horizontalCenter="1" id="button" click="onClick(event)" label="View"/>
                                    <fx:Script>
                                        <![CDATA[
                                            import mx.controls.Alert;
                                            import mx.events.FlexEvent;

                                            protected function canvas1_dataChangeHandler(event:FlexEvent):void
                                            {
                                                if(data.@field_visibility == "true"){
                                                    this.button.visible = true;
                                                }
                                                else{
                                                    this.button.visible = false;
                                                }
                                            }

                                            private function onClick(evt:Event):void
                                            {
                                                test_Var = data.@field_value;
                                            }
                                        ]]>
                                    </fx:Script>
                                </mx:Canvas>
                            </fx:Component>
                        </mx:itemRenderer>
                    </mx:DataGridColumn>
                </mx:columns>
            </mx:DataGrid>*

Answer 1

fx:Component defines a totally new scope. You can only access properties in your initial scope by using the outerDocument keyword.

In your case change it to this:

private function onClick(evt:Event):void
{
    outerDocument.test_Var = data.@field_value;
}

For more information read (see the section on outerDocument):

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html