Flex: application is confused when passing variables to custom component

Question

I'm new to Flex and I'm missing something very basic about architecting a Flex application -- I've implemented a custom component MyReportGrid and extended GridColumn with MyColumn. I've tried to outline the application code below.

The interesting thing to notice is that class OfficeItems is used by class MyItems, and the MyColumn (which extends GridColumn) includes a customPath variable that is used to access variables pen, pencil, and stapler inside class OfficeItems.

I believe that is the reason why manually sorting (by clicking on the columns in the datagrid) only works for columns corresponding to zipCode and stateCode and NOT pen, pencil, and stapler.

Also, when I try to use a simple labelFunction for zipCode or stateCode it always works fine, but implementing a labelFunction for pen, pencil, or stapler never works. By "never works" I mean that the labelFunction is called correctly, and it performs it's required task in that the labelFunction receives the correct object and actually returns the correct formatted String, but this returned value is never displayed in the datagrid (I'm assuming the customPath variable confuses the labelFunction as to which variable the returned String maps to).

I think these are both the same issue in that the customPath aspect of the MyColumn confuses the application. Any idea how to fix the sorting and/or labelFunction? Thanks in advance for your patience in reading this (long) posting.

The classes are:

package com.supportClasses  
{
    public class OfficeItems {
    public var pen:*;
    public var pencil:*;
    public var stapler:*;
    }
}

and

package com.models
{
    import com.supportClasses.OfficeItems;
    [Bindable]
    public class MyItems extends Model {
        public function myItems() {
            super();
        }
        public var office:OfficeItems;
        public var zipCode:int;
        public var stateCode:String;
    }
}

The data grid looks like:

...
<components:MyReportGrid id="myGrid" dataProvider="{_myData}"...>
    <components:columns>
        <fx:Array>
            <supportClasses:MyColumn customPath="office" dataField="pen"... />
            <supportClasses:MyColumn customPath="office" dataField="pencil"... />
            <supportClasses:MyColumn customPath="office" dataField="stapler"... />
            <supportClasses:MyColumn dataField="zipCode"... />
            <supportClasses:MyColumn dataField="stateCode"... />
            ...

where _myData has a class of MyItems (note: the customPath feature is ignored by MyColumn when not present here, such as for zipCode and stateCode). MyColumn is:

package com.components.supportClasses {
    import spark.components.gridClasses.GridColumn;
    public class MyColumn extends GridColumn
    {
        public var customPath:String="";
        ...
        public function MyColumn(headerText:String="header" customPath:String="", dataField:String="data", ...) {
           this.headerText=headerText;
           this.customPath=customPath;
           this.dataField=dataField;
           ...
        }
    }
}

and MyReportGrid is:

package com.models {
    <?xml version="1.0" encoding="utf-8"?>
    <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"    
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         width="400" height="300">
       import com.components.myClasses.MyColumn;
       import com.itemRenderers.myItemRenderer;
       import mx.collections.ArrayCollection;
       import mx.collections.ArrayList;
       import mx.collections.ListCollectionView;
       import spark.components.gridClasses.GridColumn;
       ...
       <s:DataGrid width="100%" ... />
    </s:Group>
}

the labelFunction is:

private function redFormat(item:Object, column:MyColumn):String {
   var formatResult:String = "red "+item.office.pen;
   return formatResult; // returns "red Bic15938" (for example)
}

as called from:

<supportClasses:MyColumn customPath="office" dataField="pen" labelFunction="redFormat"... />

Answer 1

This is just a guess, but could it be something like adding a "toString" function to the OfficeItems class? (I would be using comments, but still working on getting reputation.)