Flex3 AdvancedDataGrid : how to add a new column based on existing one?
I have a AdvancedDataGrid in flex3 (Flex 3) with 4 columns:
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="..assetscoeur_rouge.png")]  
 public static const ICON_FAVORITE:Class;  
 [Embed(source="..assetscoeur_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; } }
 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="..assetscoeur_rouge.png")]
                        public static const ICON_FAVORITE:Class;
                        [Embed(source="..assetscoeur_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.  
上一篇: 当视图状态在Flex中更改时运行一个函数
