1 Reply Latest reply on Nov 26, 2012 6:38 AM by jfb00

    AdvancedDataGrid component using custom ItemRenderer/Editor doesn't work correctly in Flex4!!!

    Xx_ann_pin_xX

      Hi, everyone.

      I'm so poor at English, so please forgive me...

      Now, I'm trying to use AdvancedDataGrid component to show some messages and URLs in my Flex application with Flex4.6.0 compiler.

      And I made custom ItemRenderer/Editor with the help of these articles.

       

      - EditorStateInfo.mxml and MainListStateRendererEditor.mxml

      http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf651fa-7fff.ht ml

       

      - RendererState.mxml

      http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf64fe7-7fdf.ht ml#WS2db454920e96a9e51e63e3d11c0bf69084-7cae

       

      However, once I run this application and edit any URLs, I still get following error message…

      TypeError: Error #1009: Cannot access a property or method of a null object reference.

      at mx.controls::AdvancedDataGridBaseEx/destroyItemEditor()[E:\dev\4.y\frameworks\projects\ad vancedgrids\src\mx\controls\AdvancedDataGridBaseEx.as:5378]

       

      I don't know how to debug this error!!

      Pleeeeeeeease help me!!

       

      These are my codes.

       

      Main.mxml [main flex application]

      <?xml version="1.0"?>

      <!-- itemRenderers\list\MainListStateRendererEditor.mxml -->

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                       xmlns:s="library://ns.adobe.com/flex/spark"

                                       xmlns:mx="library://ns.adobe.com/flex/mx"

                                       creationComplete="atInit()"

                                       height="768" width="1024">

       

                <fx:Script>

                          <![CDATA[

       

                                    import mx.collections.ArrayCollection;

                                    import mx.controls.TextInput;

                                    import mx.events.ListEvent;

                                    import mx.events.AdvancedDataGridEvent;

       

                                    import myComponents.EditorStateInfo;

                                    import myComponents.*;

       

                                    [Bindable]

                                    private var dataArray:ArrayCollection;

       

                                    public function atInit():void{

                                              dataArray = new ArrayCollection();

                                              dataArray.enableAutoUpdate();

                                              dataArray.addItem(new TestData("Dog", "ABC", "http://www.google.com"));

                                              dataArray.addItem(new TestData("Cat", "DEF", "http://www.google.com"));

                                              dataArray.addItem(new TestData("Bird", "GHI", "http://www.google.com"));

                                    }

       

       

       

                                    // Define the event listener.

                                    public function processData(event:ListEvent):void {                

       

                                              // Disable copying data back to the control.

                                              event.preventDefault();

       

                                              // Get new label from editor.

                                              myList.editedItemRenderer.data.label =

                                                        EditorStateInfo(event.currentTarget.itemEditorInstance).newLabel .text;

       

                                              // Get new data from editor.

                                              myList.editedItemRenderer.data.data =

                                                        EditorStateInfo(event.currentTarget.itemEditorInstance).newData. text;

       

                                              // Get new webPage from editor.

                                              myList.editedItemRenderer.data.webPage =

                                                        EditorStateInfo(event.currentTarget.itemEditorInstance).newWebPa ge.text;

       

                                              // Close the cell editor.

                                              myList.destroyItemEditor();

       

                                              // Notify the list control to update its display.

                                              myList.dataProvider.itemUpdated(myList.editedItemRenderer);

                                    }

       

       

                                    public function processData_ADGver(event:AdvancedDataGridEvent):void {                

       

                                              // Disable copying data back to the control.

                                              event.preventDefault();

       

                                              switch(event.columnIndex){

                                                        case 0:

                                                                  // Get new label from editor.

                                                                  myADG.editedItemRenderer.data.text1 =

                                                                  TextInput(event.currentTarget.itemEditorInstance).text;

                                                                  break;

                                                        case 1:

                                                                  // Get new data from editor.

                                                                  myADG.editedItemRenderer.data.text2 =

                                                                  TextInput(event.currentTarget.itemEditorInstance).text;

                                                                  break;

                                                        case 2:

                                                                  // Get new webPage from editor.

                                                                  myADG.editedItemRenderer.data._url =

                                                                  URLEditor(event.currentTarget.itemEditorInstance).newURL.te xt;

                                                                  break;

                                                        default:

                                                                  trace("ERROR!");

                                              }

       

                                              // Close the cell editor.

                                              myADG.destroyItemEditor();

       

                                              // Notify the list control to update its display.

                                              myADG.dataProvider.itemUpdated(myADG.editedItemRenderer);

                                    }

                          ]]>

                </fx:Script>

       

                <mx:List id="myList" x="0" y="0"

                                     height="180" width="250"

                                     editable="true"

                                     itemRenderer="myComponents.RendererState"

                                     itemEditor="myComponents.EditorStateInfo"

                                     variableRowHeight="true"

                                     itemEditEnd="processData(event);">

                          <mx:dataProvider>

                                    <fx:Object label="Alaska"

                                                           data="Juneau"

                                                           webPage="http://www.state.ak.us/"/>

                                    <fx:Object label="Alabama"

                                                           data="Montgomery"

                                                           webPage="http://www.alabama.gov/" />

                                    <fx:Object label="Arkansas"

                                                           data="Little Rock"

                                                           webPage="http://www.state.ar.us/"/>

                          </mx:dataProvider>

                </mx:List>

       

       

                <mx:AdvancedDataGrid id="myADG" x="300" y="0" height="480" width="480"

                                                                   editable="true"

                                                                   dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"

                                                                   draggableColumns="true" resizableColumns="true" verticalScrollPolicy="on" horizontalScrollPolicy="on"

                                                                   variableRowHeight="false" rowHeight="30"

                                                                   itemEditEnd="processData_ADGver(event);">

       

                          <mx:dataProvider>

                                    <mx:HierarchicalData source="{dataArray}"/>

                          </mx:dataProvider>

       

                          <mx:columns>

                                    <mx:AdvancedDataGridColumn dataField="text1" headerText="Animal" width="150" resizable="true" draggable="true" editable="true"

                                                                                                   editorDataField="text" rendererIsEditor="false" editorUsesEnterKey="false"

                                                                                                   itemRenderer="mx.controls.Label" itemEditor="mx.controls.TextInput">

                                    </mx:AdvancedDataGridColumn>

                                    <mx:AdvancedDataGridColumn dataField="text2" headerText="Text" width="100" resizable="true" draggable="true" editable="true"

                                                                                                   editorDataField="text" rendererIsEditor="false" editorUsesEnterKey="false"

                                                                                                   itemRenderer="mx.controls.Label" itemEditor="mx.controls.TextInput">

                                    </mx:AdvancedDataGridColumn>

                                    <mx:AdvancedDataGridColumn dataField="_url" headerText="Link" resizable="true" draggable="true" editable="true"

                                                                                                   editorDataField="newURL" rendererIsEditor="false" editorUsesEnterKey="false"

                                                                                                   itemRenderer="myComponents.URLRenderer" itemEditor="myComponents.URLEditor">

                                    </mx:AdvancedDataGridColumn>

                          </mx:columns>

                </mx:AdvancedDataGrid>

       

      </s:Application>

       

       

      TestData.as [datagrid data class]

      package{

                import flash.display.Sprite;

       

       

                public class TestData extends Sprite{

                          [Bindable]

                          public var text1:String;

                          [Bindable]

                          public var text2:String;

                          [Bindable]

                          public var _url:String;

       

                          public function TestData(a:String, b:String, c:String):void{

                                    this.text1 = a;

                                    this.text2 = b;

                                    this._url = c;

                          }

                }

      }

       

       

      URLRenderer.mxml [ItemRenderer]

      <?xml version="1.0"?>

      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >   

                <mx:Script>

                          <![CDATA[

                                    // Import Event and URLRequest classes.

                                    import flash.events.Event;

                                    import flash.net.URLRequest;

       

                                    private var u:URLRequest;

       

                                    // Event handler to open URL using

                                    // the navigateToURL() method.

                                    private function handleClick(eventObj:Event):void {

                                              u = new URLRequest(data._url);

                                              navigateToURL(u);

                                    }  

                          ]]>

                </mx:Script>

       

                <!-- Define the Link control to open a URL. -->

                <mx:LinkButton id="webPage" label="{data._url}"

                                                 click="handleClick(event);" color="blue"  />

      </mx:VBox>

       

       

      URLEditor.mxml [ItemEditor]

      <?xml version="1.0"?>

      <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"

                           xmlns:s="library://ns.adobe.com/flex/spark"

                           xmlns:mx="library://ns.adobe.com/flex/mx">

       

                <mx:TextInput id="newURL" text="{data._url}" />

      </mx:VBox>

       

       

      RendererState.mxml [ItemRenderer from http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf64fe7-7fdf.ht ml#WS2db454920e96a9e51e63e3d11c0bf69084-7cae]

      <?xml version="1.0"?>

      <!-- itemRenderers\list\myComponents\RendererState.mxml -->

      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >   

                <mx:Script>

                          <![CDATA[

                                    // Import Event and URLRequest classes.

                                    import flash.events.Event;

                                    import flash.net.URLRequest;

       

                                    private var u:URLRequest;

       

                                    // Event handler to open URL using

                                    // the navigateToURL() method.

                                    private function handleClick(eventObj:Event):void {

                                              u = new URLRequest(data.webPage);

                                              navigateToURL(u);

                                    }  

                          ]]>

                </mx:Script>

       

                <mx:HBox > 

                          <!-- Use Label controls to display state and capital names. -->

                          <mx:Label id="State" text="State: {data.label}"/>

                          <mx:Label id="Statecapital" text="Capital: {data.data}" />

                </mx:HBox>

       

                <!-- Define the Link control to open a URL. -->

                <mx:LinkButton id="webPage" label="Official {data.label} web page"

                                                 click="handleClick(event);" color="blue"  />

      </mx:VBox>

       

       

      EditorStateInfo.mxml [ItemEditor from http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf651fa-7fff.ht ml]

      <?xml version="1.0"?>

      <!-- itemRenderers\list\myComponents\EditorStateInfo.mxml -->

      <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"

                           xmlns:s="library://ns.adobe.com/flex/spark"

                           xmlns:mx="library://ns.adobe.com/flex/mx">

       

                <mx:TextInput id="newLabel" text="{data.label}" />

                <mx:TextInput id="newData" text="{data.data}" />

                <mx:TextInput id="newWebPage" text="{data.webPage}" />

      </mx:VBox>

       

       

       

      Thank you for your time!

      Xx_ann_pin_xX