在 Flash Builder 中寻找动态创建的 Spark.DataGrid 的示例

Question

我正在尝试在 Flash Builder AS3 代码中（不在标记中）动态创建 DataGrid，但无法获取任何要显示的数据。 以下是我创建网格的方式：

for (var i:int = 0; i < numOfWinners; i++){
            if (list[i].Name[0])                        
                dataP.addItem({profilePic: list[i].ProfilePicUrl.toString(), name: list[i].Name.toString(), prizePic: list[i].ItemImageUrl.toString()});
            else
                dataP.addItem({profilePic: list[i].ProfilePicUrl.toString(), name: list[i].UserName.toString(), prizePic: list[i].ItemImageUrl.toString()});
        }

        // Create a new DataGridColumn object.
        var playerCol:GridColumn = new GridColumn("profilePic");
        playerCol.width = 110;

        var nameCol:GridColumn = new GridColumn("name");
        nameCol.width = 100;             
        nameCol.itemRendererFunction = MyCustomItemRendererFunction;            
        var prizePicCol:GridColumn = new GridColumn("prizePic");
        prizePicCol.width = 160;

        cols.addItem(nameCol);
        cols.addItem(playerCol);
        cols.addItem(prizePicCol);
        grid.columns = cols;            
        grid.dataProvider = dataP;



        private function MyCustomItemRendererFunction(item:Object, column:GridColumn):ClassFactory 
    {           
        // Create a Class Factory variable
        var myRendererObject:ClassFactory;

        // This is the "default" color is nothing else happens
        // I'm passing it a pointer to "MyItemRenderer"

        myRendererObject = new ClassFactory(ProfilePicRenderer);

        if (column.dataField == "profilePic")
        {
            myRendererObject.properties = { source: item.profilePic};
        }

        return myRendererObject;

    }

我似乎找到的所有示例都在 Flex 4 (MX + Spark) 项目的标记中。

我在这里做错了什么？

谢谢！

Answer 1

您可以添加 ProfilePicRenderer 如下：

var playerCol:GridColumn = new GridColumn("Profile Picture");
var profilePicItemRenderer:ClassFactory = new ClassFactory(ProfilePicRenderer);
playerCol.itemRenderer =  profilePicItemRenderer;
playerCol.width = 110;

ProfilePicRenderer.mxml 如下所示：

<?xml version="1.0"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
    override public function set data(value:Object):void {
        if (super.data != value) {
            super.data = value;
        }
        image.source = "./images/" + data.profilePic;
    }
    ]]></fx:Script>
<s:Image id="image" width="50" height="50"/>

</s:GridItemRenderer>

同样添加PrizePicRenderer如下：

var prizePicCol:GridColumn = new GridColumn("Prize Picture");
var prizePicRenderer:ClassFactory = new ClassFactory(PrizePicRenderer);
prizePicCol.itemRenderer =  prizePicRenderer;
prizePicCol.width = 160;

PrizePicRenderer.mxml 如下所示：

<?xml version="1.0"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
    override public function set data(value:Object):void {
        if (super.data != value) {
            super.data = value;
        }
        image.source = "./images/" + data.prizePic;
    }
    ]]></fx:Script>
<s:Image id="image" width="50" height="50"/>
</s:GridItemRenderer>

这里是使用itemRenderer动态添加DataGrid的示例应用程序：

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    import mx.collections.ArrayList;

    import spark.components.DataGrid;
    import spark.components.gridClasses.GridColumn;

    private var dataP:ArrayCollection = new ArrayCollection([
        {"name": "Lebron James", "profilePic": "p1.jpeg", "prizePic": "t1.jpg"},
        {"name": "Stephen Curry", "profilePic": "p2.jpeg", "prizePic": "t2.jpg"},
        {"name": "Kevin Durant", "profilePic": "p3.jpeg", "prizePic": "t3.jpg"},]) ;

    private function addDataGrid():void
    {
        var grid:DataGrid = new DataGrid();

        var nameCol:GridColumn = new GridColumn("Name");
        nameCol.width = 100;
        nameCol.dataField = "name";

        var playerCol:GridColumn = new GridColumn("Profile Picture");
        var profilePicItemRenderer:ClassFactory = new ClassFactory(ProfilePicRenderer);
        playerCol.itemRenderer =  profilePicItemRenderer;
        playerCol.width = 110;

        var prizePicCol:GridColumn = new GridColumn("Prize Picture");
        var prizePicRenderer:ClassFactory = new ClassFactory(PrizePicRenderer);
        prizePicCol.itemRenderer =  prizePicRenderer;
        prizePicCol.width = 160;

        var cols:ArrayList = new ArrayList();
        cols.addItem(nameCol);
        cols.addItem(playerCol);
        cols.addItem(prizePicCol);
        grid.columns = cols;

        grid.dataProvider = dataP;
        vGroup.addElement(grid);
    }
    ]]></fx:Script>
<s:VGroup id="vGroup" paddingTop="10" paddingLeft="10"
                    paddingBottom="10" paddingRight="10">
    <s:Button label="Click to build DataGrid dynamically." click="addDataGrid()"/>
</s:VGroup>
</s:Application> 

我假设您的项目中有图片文件并且dataProvider 定义明确。希望这会有所帮助。

这里是 ProfilePicRenderer 的 ActionScript 版本，如果您不想要 MXML，它是 ProfilePicRendererAS.as。

package {
import spark.components.Image;
import spark.components.gridClasses.GridItemRenderer;

public class ProfilePicRendererAS extends GridItemRenderer {
private var image:Image;
public function ProfilePicRendererAS() {
    super();
    image = new Image();
    image.width = 50;
    image.height = 50;
    this.addElement(image);
}
override public function set data(value:Object):void {
    if (super.data != value) {
        super.data = value;
    }
    image.source = "./images/" + data.profilePic;
}
}
}