Flex3 AdvancedDataGrid：如何在现有列的基础上添加新列？

Question

I have a AdvancedDataGrid in flex3 (Flex 3) with 4 columns:

• id : int
• category : String
• name : String
• isPreferred : Boolean

And I would like to add a fifth column

• favorite : Image

  The value of favorite will be based on the value of isPreferred : if true, then favorite will be a read-heart-icon, if false, a grey-heart-icon.
  Thanks for your help.

Below is my code :

• the mxml content

  <xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()">
  <mx:Script>
  <![CDATA[
  import mx.collections.ArrayCollection;
  import com.test.Purchase;
  [Embed(source="..\\assets\\coeur_rouge.png")]
  public static const ICON_FAVORITE:Class;
  [Embed(source="..\\assets\\coeur_gris.png")]
  public static const ICON_NEUTRAL:Class;
  [Bindable]
  public var myAC:ArrayCollection = new ArrayCollection();
  public function init() :void {
  var aPurchase:Purchase=new Purchase();
  var anotherPurchase:Purchase= new Purchase();
  aPurchase.id=120;
  aPurchase.category="category1";
  aPurchase.name="advantage 2";
  aPurchase.isPreferred=true;
  myAC.addItem(aPurchase);
  anotherPurchase.id=220;
  anotherPurchase.category="category2";
  anotherPurchase.name="Nintendo DS";
  anotherPurchase.isPreferred=false;
  myAC.addItem(anotherPurchase);}
  ]]>
  </mx:Script>
  <?mx:AdvancedDataGrid id="dg" width="500" height="150" dataProvider="{myAC}">
  <mx:groupedColumns>
  <mx:AdvancedDataGridColumn dataField="id" headerText="ID" width="300"/> <mx:AdvancedDataGridColumn dataField="category" headerText="Category" width="400"/>
  <mx:AdvancedDataGridColumn dataField="name" headerText="Name" width="900"/>
  <mx:AdvancedDataGridColumn headerText="Fav?" dataField="isPreferred" width="700"/>
  </mx:groupedColumns>
  </mx:AdvancedDataGrid>
  </mx:Application>

  • the data object in action script public class Purchase { public function Purchase() {

    }

    private var _id:int = -1; private var _category:String = null; private var _productName:String = null;
    private var _preferred:Boolean=false;

    public function get id():int { return _id; }

    public function set id(pId:int):void { _id = pId; }

    public function get category():String { return _category; }

    public function set category(pCategory:String):void { _category = pCategory;

     if ((_category == null) || (_category == "")) { _category = "Default Category"; } 

    }

    public function get name():String { return _productName; }

    public function set name(pName:String):void { _productName = pName;

     if ((_productName == null) || (_productName == "")) { _productName = "default product name"; category = _productName; } 

    }

    public function get isPreferred() : Boolean { return _preferred; }

    public function set isPreferred(pPreferred:Boolean) :void { _preferred=pPreferred; } }

Answer 1

In order to do this you'll need an itemRenderer . Something like this should work:

<mx:AdvancedDataGridColumn headerText="favorite">
    <mx:itemRenderer>
        <mx:Component>
            <mx:Image source="{data.isPreferred ? ICON_FAVORITE : ICON_NEUTRAL}">
                <mx:Script>
                    <![CDATA[
                        [Embed(source="..\assets\coeur_rouge.png")]
                        public static const ICON_FAVORITE:Class;

                        [Embed(source="..\assets\coeur_gris.png")]
                        public static const ICON_NEUTRAL:Class;
                    ]]>
                </mx:Script>
            </mx:Image>
        </mx:Component>
    </mx:itemRenderer>
</mx:AdvancedDataGridColumn>

Please keep in mind that this piece of code is not reusable. If you need to use columns that show images a lot I recommend implementing a custom ImageColumn that extends mx:AdvancedDataGridColumn , has some kind of imageFunction as property and uses a custom itemRenderer which would use the column's imageFunction to show the appropriate image.