Adobe Flex Error Trying To Render DropdownList in Grid - apache-flex

Question

Let me start by saying that I know absolutely NOTHING about Adobe Flex. This application was created by a contractor then brought back in-house and none of the developers here know anything about Flex. I am trying to render a simple dropdownlist but receive the error "Access of Undefined Property shipstatusArray".
Here is the xml of the dropdownlist:
<s:GridColumn headerText = "Shipping Status">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer >
<s:DropDownList id="myDDL" width="140" dataProvider="{shipstatusArray}" >
</s:DropDownList>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Here is the definition:
[Bindable]public var shipstatusArray:ArrayCollection = new ArrayCollection([{id:1, name:'In Progress'},
{id:2, name:'Completed'}]);
I wasn't sure what was needed so here is the entire code page:
<?xml version="1.0" encoding="utf-8"?>
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.ResultEvent;
import mx.utils.ObjectUtil;
import mx.utils.StringUtil;
import spark.events.IndexChangedEvent;
import qs.utils.StringUtils;
[Bindable]public var model:PECToolsModel = PECToolsModel.getInstance();
[Bindable]public var company:CompanyDetailsVO;
[Bindable]public var selectedItem:Object = new Object();
[Bindable]public var mainDataObj:Object = new Object();
[Bindable]public var TypeID:int;
[Bindable]public var DepartmentID:int;
[Bindable]public var gridtype:int;
[Bindable]public var WOVO:WorkOrderHomeVO;
[Bindable]public var EditWODetails:WorkOrderDetailsHome;
[Bindable]public var shipstatusArray:ArrayCollection = new ArrayCollection([{id:1, name:'In Progress'},
{id:2, name:'Completed'}]);
public function dgIbWorkOrders_doubleClickHandler(event:MouseEvent):void
{
if(TypeID == 2)
{
if(dgWorkOrders.selectedItem)
{
if(!(dgWorkOrders.selectedItem.WorkOrderReturnID))
{
model.isFromPendingDocuments = false;
model.isfromCompUserlist = false;
model.isfromMyDashBoard = false;
model.isfromSalesDashBoard = false;
model.reportsObj = null;
model.isFromIBD = false;
model.isFromMenu = false;
Setpop();
}
else
Alert.show(model.AlertWork12 ,model.alertLabel2);
}
else
Alert.show(model.alertLabel3, model.alertLabel2);
}
}
public function Setpop():void
{
WOVO = new WorkOrderHomeVO();
WOVO.WorkOrderID = dgWorkOrders.selectedItem.WorkOrderID;
EditWODetails = model.tabManager.openWO(WOVO );
if(EditWODetails != null)
{
model.WorkOrderIDArray.push(WOVO.WorkOrderID);
new UpdateWorkOrderAuditProcessEvent(String(dgWorkOrders.selectedItem.WorkOrderID), 1,null).dispatch();
EditWODetails.mainDataObj = this;
EditWODetails.mode = "Edit";
EditWODetails.SelectedWOObj = dgWorkOrders.selectedItem as Object;
EditWODetails.isFromCompModule = false;
EditWODetails.isFromWODashboard = true;
EditWODetails.isFromWOModule = false;
EditWODetails.isFromAccDashboard = false;
EditWODetails.gridtype = gridtype;
EditWODetails.CreateControl();
}
}
public function SetLabel():void
{
if(TypeID == 1)//Total
{
if(mainDataObj.WorkOrderlistArray[1].value != 0)
{
frm1.title = selectedItem.name ;
mainvg.visible = true;
mainvg.includeInLayout =true;
}
else
{
frm1.title = selectedItem.name + " : No Data";
mainvg.visible = false;
mainvg.includeInLayout = false;
}
}
else if(TypeID == 2)//inprogress/To be processed
{
if(mainDataObj.WorkOrderlistArray[2].value != 0)
{
frm1.title = selectedItem.name ;
mainvg.visible = true;
mainvg.includeInLayout =true;
}
else
{
frm1.title = selectedItem.name + " : No Data";
mainvg.visible = false;
mainvg.includeInLayout = false;
}
}
else if(TypeID == 3)//Due/processed
{
if(mainDataObj.WorkOrderlistArray[3].value != 0)
{
frm1.title = selectedItem.name ;
mainvg.visible = true;
mainvg.includeInLayout =true;
}
else
{
frm1.title = selectedItem.name + " : No Data";
mainvg.visible = false;
mainvg.includeInLayout = false;
}
}
}
protected function group1_creationCompleteHandler(event:FlexEvent):void
{
SetLabel();
}
public function frm1_ViewHandler(event:Event):void
{
if(dgWorkOrders.selectedItem)
{
printInvoice();
}
else
Alert.show(model.alertLabel3 ,model.alertLabel2)
}
private function printInvoice():void
{
model.isCompanyOrderPayment = false;
var strSessionID:String = "";
strSessionID = Utils.generateRandomString(8);
new UpdateUserSessionForFileViewEvent(model.loggedinUser.UserID, strSessionID, dgWorkOrders.selectedItem.WorkOrderID, this, 2).dispatch(); //TypeID=2, for Invoice PDF
}
public function viewDocumentBySessionID(invoiceSessionID:String):void
{
navigateToURL(new URLRequest(model.WorkOrderUrlPDF + invoiceSessionID),"_blank");
}
]]>
</fx:Script>
<fx:Declarations>
<mx:DateFormatter id="dtFormatter" formatString="MM/DD/YYYY"/>
<mx:DateFormatter id="dtformat" formatString="MM/DD/YYYY H:NN:SS A"/>
</fx:Declarations>
<controls:CustomLayoutPanel id="frm1" width="100%" height="100%" >
<s:VGroup width="100%" height="100%" visible="false" id="mainvg"
includeInLayout="false">
<s:DataGrid id="dgWorkOrders" dataProvider="{mainDataObj.UserWorkorderArray}"
doubleClickEnabled="{mainDataObj.UserWorkorderArray.length > 0}" doubleClick="dgIbWorkOrders_doubleClickHandler(event)"
variableRowHeight="true" width="100%" height="100%"
toolTip="{(mainDataObj.UserWorkorderArray.length > 0)&&(TypeID==2) ? 'Double-Click to view Work Orders' : ''}"
skinClass="com.pec.tools.controls.VerificationGridHeader" >
<s:rowBackground>
<fx:Component>
<home:WorkOrderGridRowHighlightRenderer/>
</fx:Component>
</s:rowBackground>
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="intSSQID" headerText="Company ID" width="90" visible="{TypeID ==2?true:false}">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer >
<s:Label text="{data.intSSQID}" visible="{data.intSSQID > 9990000 ? true : false}" includeInLayout="{data.intSSQID > 9990000 ? true: false}" verticalCenter="0" horizontalCenter="0" verticalAlign="middle"/>
<mx:LinkButton label="{data.intSSQID}" visible="{(data.intSSQID != 0 && data.intSSQID < 9990000)}" includeInLayout="{data.intSSQID != 0 && data.intSSQID < 9990000 }" verticalCenter="0" horizontalCenter="0"
textDecoration="underline" color="blue" click="{outerDocument.dgIbWorkOrders_doubleClickHandler(null)}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="vchinvoiceno" headerText="Invoice #" width="100">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer >
<mx:LinkButton label="{data.vchInvoiceNo}" visible="{data.vchinvoiceno != ''}" includeInLayout="{data.vchinvoiceno != ''}" paddingLeft="15" height="100%"
textDecoration="underline" toolTip="Click here to print invoice" color="blue" click="{outerDocument.frm1_ViewHandler(null)}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="dteInvoiceDate" headerText="Invoice Date" width="100">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Label text="{outerDocument.dtFormatter.format(data.dteInvoiceDate)}" verticalCenter="0" horizontalCenter="0" verticalAlign="middle"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn id = "compicon" headerText="Company Name" >
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer >
<s:HGroup verticalAlign="middle" width="100%" height="100%" >
<s:Image id="profileImage" source="#Embed('/assets/priority.png')" visible="{data.PriorityIDs != 3}" includeInLayout = "{data.PriorityIDs != 3}" />
<s:Label text="{data.vchCompanyName}" maxDisplayedLines="3" paddingTop="3" paddingLeft="2" width="100%"/>
</s:HGroup>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="WorkOrderStatus" headerText="Status" visible="{TypeID==1||TypeID==3}" width="90" >
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer >
<s:Label text="{data.WorkOrderStatus}" horizontalCenter="0" verticalAlign="middle" verticalCenter="0"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn headerText="Created Date" >
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer >
<s:Label text="{outerDocument.dtformat.format(data.dteCreatedDate)}" horizontalCenter="0" verticalAlign="middle" verticalCenter="0"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn headerText = "Shipping Status">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer >
<s:DropDownList id="myDDL" width="140" dataProvider="{shipstatusArray}" >
</s:DropDownList>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
<s:HGroup width="100%" paddingLeft="7" paddingBottom="3" verticalAlign="middle">
<s:Label text="Total WorkOrders: {mainDataObj.UserWorkorderArray.length}" />
<s:HGroup width="100%" horizontalAlign="right" paddingRight="3" visible="{mainDataObj.UserWorkorderArray.length > 0}">
<mx:Box backgroundColor="0xF7FE2E">
<mx:Text text="Work Order in Process by another User" fontWeight="bold"/>
</mx:Box>
</s:HGroup>
</s:HGroup>
</s:VGroup>
</controls:CustomLayoutPanel>
ANY assistance is greatly appreciated!

Answer 1

The code snippet you posted seems to be missing the start tag <fx:Script>. Please add that.
Add double quotes to your values.
[Bindable]public var shipstatusArray:ArrayCollection = new ArrayCollection([{id:"1", name:"In Progress"}, {id:"2", name:"Completed"}]);
Use labelField to indicate which field you want to display.
<s:DropDownList id="myDDL" width="140" dataProvider="{shipstatusArray}" labelField="name" />
You can use this link as a reference.