actionscript-3flex4mxmlitemrenderer

How to disable a component inside Datagrid which is rendered using inline item renderer


<?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Script>
            <![CDATA[
                import mx.controls.Alert;
                private var myTimer:Timer;

                [Bindable] public var isEnabled:Boolean = true;

                public function getDetails():void {
                    Alert.show("Got it!!");
                    isEnabled = false;
                    myTimer = new Timer(5000, 1);
                    myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
                    myTimer.start();
                }

                public function timerHandler(event:TimerEvent):void {
                    isEnabled = true;
                }
        ]]>
    </mx:Script>
    <mx:ArrayCollection id="myAc">
        <mx:source>
            <mx:Object version="1.0" telephone="9875454214" />
            <mx:Object version="2.0" telephone="8794568784" />
            <mx:Object version="3.0" telephone="8796454487" />
        </mx:source>
    </mx:ArrayCollection>
    <mx:HBox>
        <mx:DataGrid verticalScrollPolicy="on"  focusEnabled="false"  name="Version" id="Version" width="100%" height="65" dataProvider="{myAc}" >
            <mx:columns >
                <mx:DataGridColumn width="150" dataField="version" headerText="Version" />
                <mx:DataGridColumn width="70" dataField="telephone" headerText="Telephone" />
                <mx:DataGridColumn width="90" paddingLeft="20" headerText="Download">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:Image height="10%" source="css/page_excel.png" click = "outerDocument.getDetails()" enabled = "{outerDocument.isEnabled}" />
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>            
            </mx:columns>
        </mx:DataGrid>
    </mx:HBox>
</mx:Application>

This application is programmed to disable the Image when it is clicked and Enable the same after 5 sec. But it is disabling whole Column. I want it to disable only the clicked Image.


Solution

  • Change your mxml

    <!--<mx:Image height="10%" source="css/page_excel.png" click = "outerDocument.getDetails()" enabled = "{outerDocument.isEnabled}" />-->
    <mx:Image height="10%" source="css/page_excel.png" click = "outerDocument.getDetails(event)" />
    

    And here is the AS code.

    public function getDetails(event: MouseEvent):void {
        Alert.show("Got it!!");
        //isEnabled = false;
        event.target.enabled = false;   // Disable clicked Object.
        myTimer = new Timer(5000, 1);
        //myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
        myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, nextfuncWithParams(timerHandler, event.target));    // Pass clicked object.
        myTimer.start();
    }
    
    public function nextfuncWithParams(nextfunc: Function, params: Object): Function {
      return function(event:TimerEvent): void{
        nextfunc(event, params);
      }
    }
    
    public function timerHandler(event: TimerEvent, MouseEventTarget: Object):void {
        //isEnabled = true;
        MouseEventTarget.enabled = true;                // Enable passed object.
    }
    

    Working Example: http://wonderfl.net/c/Gv9k

    Update For using Image.

                public function getDetails(event: MouseEvent):void {
    
                    //Alert.show("Got it!!");
                    //event.target.enabled = false;       // event.target was Loader...
    
                    var obj: Object = event.target;
                    while (obj.parent)
                    {
                        if (obj is Image)
                        {
                            Image(obj).enabled = false;
                            break;
                        }
                        obj = obj.parent;
                    }
    
                    myTimer = new Timer(5000, 1);
                    //myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
                    myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, nextfuncWithParams(timerHandler, obj));
                    myTimer.start();
                }