Error #1009, navigator is null

Question

I've got some problem in Flex. Basically I want to navigate to other pages by using navigator.pushview from list through custom item renderer. This is my CustomItemRender.as. Edit:

package renderer
{
   import flash.events.MouseEvent;
   import mx.core.FlexGlobals;
   import mx.events.FlexEvent;
   import mx.events.ItemClickEvent;
   import spark.components.LabelItemRenderer;
   import spark.components.NavigatorContent;
   import spark.components.ViewNavigator;

public class CustomItemRender extends LabelItemRenderer
{
    protected var var_A:Image;

    [Bindable]
    public var navigator:ViewNavigator = new ViewNavigator();

    public function PrgListItemRenderer()
    {
        super();
    }

    override public function set data(value:Object):void
    {
        super.data = value;         
    }

    override protected function createChildren():void
    {
        super.createChildren();

        if(!takeAtt)
        {
            var_A= new Image();
            var_A.source = "data/pics/var_A.png";
            var_A.width = 23;
            var_A.height = 23;
            var_A.buttonMode = true;
            var_A.addEventListener(MouseEvent.CLICK, var_AItem);
            addChild(var_A);
        }
     }

override protected function measure():void
    {
        super.measure();
        // measure all the subcomponents here and set measuredWidth, measuredHeight, 
        // measuredMinWidth, and measuredMinHeight              
    }

    /**
     * @private
     * 
     * Override this method to change how the background is drawn for 
     * item renderer.  For performance reasons, do not call 
     * super.drawBackground() if you do not need to.
     */
    override protected function drawBackground(unscaledWidth:Number, 
                                               unscaledHeight:Number):void
    {
        super.drawBackground(unscaledWidth, unscaledHeight);
        // do any drawing for the background of the item renderer here  
        if(selected || showsCaret)
        {
            graphics.beginFill(0xffffff, 1);
            graphics.endFill();
        }
    }

public function var_AItem(event:MouseEvent):void
    {   
        trace("navigator: "+navigator);
        navigator.pushView(nextView); //this is the line that have error #1009
    }

    }
}

But I got Error #1009. Help me please. Thanks.

Answer 1

I think it's a bad idea to listen to the click event inside the item renderer. Your basic setup should look something like this:

->ViewNavigatorApplication>

-->SomeCustomView

---> SomeListBasedComponent id="list" itemRenderer="someCustomRenderer"

Fill the list with some data, which will be presented by your itemRenderer.

Now listen to the "IndexCangeEvent" of the list (from your view) and handle the 'click' there

To your view add:

private function init():void 
{ 
 list.addEventListener(IndexChangeEvent.CHANGE , onIndexChange );
}

protected function onIndexChange(e:IndexChangeEvent):void
{
 // find out which item was selected. You can use the selectedItem property for this
 var item:Object = list.selectedItem;
 // start the view;
 navigator.pushView(MyViewClass , item.someViewData );
}

Your view will hold the reference to the ViewNavigator.

P.S. dont forget to call the init() function onCreationComplete() of your view.

To your view declaration add:

View ... creationComplete="init()" >