Flex3 AdvancedDataGrid:如何添加一个基于现有的新列?
我在Flex3(Flex 3)中有4列的AdvancedDataGrid:
我想添加第五栏
最喜欢的:图片
喜欢的值将基于isPreferred的值:如果为true,则最喜欢的将是一个读心形图标,如果为假,则为灰心图标。
谢谢你的帮助。
以下是我的代码:
mxml内容
<xml version =“1.0”?>
<mx:Application xmlns:mx =“http://www.adobe.com/2006/mxml”applicationComplete =“init()”>
<MX:脚本>
<![CDATA [
导入mx.collections.ArrayCollection;
import com.test.Purchase;
[嵌入(源= “.. 资产 coeur_rouge.png”)]
公共静态常量ICON_FAVORITE:Class;
[嵌入(源= “.. 资产 coeur_gris.png”)]
公共静态常量ICON_NEUTRAL:Class;
[绑定]
public var myAC:ArrayCollection = new ArrayCollection();
公共函数init():void {
var aPurchase:Purchase = new Purchase();
var anotherPurchase:Purchase = new Purchase();
aPurchase.id = 120;
aPurchase.category = “类别1”;
aPurchase.name =“优势2”;
aPurchase.isPreferred = TRUE;
myAC.addItem(aPurchase);
anotherPurchase.id = 220;
anotherPurchase.category = “类别2”;
anotherPurchase.name =“Nintendo DS”;
anotherPurchase.isPreferred = FALSE;
myAC.addItem(anotherPurchase);}
]]>
</ MX:脚本>
<?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:应用>
action脚本中的数据对象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; }
公共功能集类别(pCategory:String):void {_category = pCategory;
if ((_category == null) || (_category == "")) {
_category = "Default Category";
}
}
public function get name():String {return _productName; }
公共函数集名称(pName:String):void {_productName = pName;
if ((_productName == null) || (_productName == "")) {
_productName = "default product name";
category = _productName;
}
}
public function get isPreferred():Boolean {return _preferred; }
公共函数集isPreferred(pPreferred:Boolean):void {_preferred = pPreferred; }}
为了做到这一点,你需要一个itemRenderer
。 像这样的东西应该工作:
<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>
请记住,这段代码不可重复使用。 如果您需要使用显示图像的列,我建议实现一个扩展mx:AdvancedDataGridColumn
的自定义ImageColumn
,将某种imageFunction
作为属性并使用自定义itemRenderer
,该自定义itemRenderer
将使用列的imageFunction
显示适当的图像。
上一篇: Flex3 AdvancedDataGrid : how to add a new column based on existing one?