AdvancedDataGrid component using custom ItemRenderer/Editor doesn't work correctly in Flex4!!!
Nov 23, 2012 3:49 AM
Tags: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
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
