在AS3 DataGrid中显示多个图像

时间:2014-06-04 13:59:58

标签: actionscript-3 datagrid

我需要在数据网格中显示多个图像,但无法弄清楚如何。我能够显示一个实现ICellRenderer的图像。 由于ICellRenderer在DataProvider中查找数据键并显示该数据键,因此我无法弄清楚如何多次显示。

是否可以使用不同类型的DataProvider或可以实现的其他接口?

这是我用于图片加载的代码:

package {
// Import the required component classes.
import fl.containers.UILoader;
import fl.controls.listClasses.ICellRenderer;
import fl.controls.listClasses.ListData;
import fl.core.InvalidationType;
import fl.data.DataProvider;
import flash.events.Event;

/**
 * This class creates a custom cell renderer which displays an image in a cell.
 * Make sure the class is marked "public" and in the case of our custom cell renderer, 
 * extends the UILoader class and implements the ICellRenderer interface.
 */
public class LoaderCellRenderer extends UILoader implements ICellRenderer {
    protected var _data:Object;
    protected var _listData:ListData;
    protected var _selected:Boolean;

    /**
     * Constructor.
     */
    public function LoaderCellRenderer():void {
        super();
    }

    /**
     * Gets or sets the cell's internal _data property.
     */
    public function get data():Object {
        return _data;
    }
    /** 
     * @private (setter)
     */
    public function set data(value:Object):void {
        _data = value;
        source = value.data;
    }

    /**
     * Gets or sets the cell's internal _listData property.
     */
    public function get listData():ListData {
        return _listData;
    }
    /**
     * @private (setter)
     */
    public function set listData(value:ListData):void {
        _listData = value;
        invalidate(InvalidationType.DATA);
        invalidate(InvalidationType.STATE);
    }

    /**
     * Gets or sets the cell's internal _selected property.
     */
    public function get selected():Boolean {
        return _selected;
    }
    /**
     * @private (setter)
     */
    public function set selected(value:Boolean):void {
        _selected = value;
        invalidate(InvalidationType.STATE);
    }

    /**
     * Sets the internal mouse state.
     */
    public function setMouseState(state:String):void {
    }
}

}

1 个答案:

答案 0 :(得分:0)

您想在单个单元格中显示多个图像吗? 您应该使用自定义GridItemRenderer:

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">

 <fx:Script>
    <![CDATA[
        override public function prepare(hasBeenRecycled:Boolean):void {
            img1.source = data.image1Source;
            img2.source = data.image2Source;
        }
    ]]>
 </fx:Script>

 <s:HGroup>
    <s:Image id="img1" />
    <s:Image id="img2" />
 </s:HGroup>    
</s:GridItemRenderer>