Skip navigation
Xx_ann_pin_xX
Currently Being Moderated

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

Nov 23, 2012 3:49 AM

Tags: #flex #advanceddatagrid #flex4 #flex4.6 #customitemrenderer #customitemeditor

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/WS2db454920e96a9e51e63e3 d11c0bf651fa-7fff.html

 

- RendererState.mxml

http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3 d11c0bf64fe7-7fdf.html#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\fr ameworks\projects\advancedgrids\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.itemEdit orInstance).newLabel.text;

 

                                        // Get new data from editor.

                                        myList.editedItemRenderer.data.data =

                                                  EditorStateInfo(event.currentTarget.itemEdit orInstance).newData.text;

 

                                        // Get new webPage from editor.

                                        myList.editedItemRenderer.data.webPage =

                                                  EditorStateInfo(event.currentTarget.itemEdit orInstance).newWebPage.text;

 

                                        // Close the cell editor.

                                        myList.destroyItemEditor();

 

                                        // Notify the list control to update its display.

                                        myList.dataProvider.itemUpdated(myList.editedItem Renderer);

                              }

 

 

                              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.itemEdito rInstance).text;

                                                            break;

                                                  case 1:

                                                            // Get new data from editor.

                                                            myADG.editedItemRenderer.data.text2 =

                                                            TextInput(event.currentTarget.itemEdito rInstance).text;

                                                            break;

                                                  case 2:

                                                            // Get new webPage from editor.

                                                            myADG.editedItemRenderer.data._url =

                                                            URLEditor(event.currentTarget.itemEdito rInstance).newURL.text;

                                                            break;

                                                  default:

                                                            trace("ERROR!");

                                        }

 

                                        // Close the cell editor.

                                        myADG.destroyItemEditor();

 

                                        // Notify the list control to update its display.

                                        myADG.dataProvider.itemUpdated(myADG.editedItemRe nderer);

                              }

                    ]]>

          </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/WS2db454920e96a9e51e63e3 d11c0bf64fe7-7fdf.html#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/WS2db454920e96a9e51e63e3 d11c0bf651fa-7fff.html]

<?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

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points