在 Flex 数据网格中使用图像项渲染

Question

我正在尝试将图像添加到在 Flex 中动态渲染的数据网格项。

这是我的 DataGrid 代码

getImagePath 函数中的“str”值是正确的。

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
             doubleClickEnabled="true">
    <mx:Script>
        <![CDATA[
            private function userLabelFunction(item:Object, column:DataGridColumn):String
            {
                return item.user.username;
            }

            private function getImagePath(item:Object, column:DataGridColumn):String
            {
                var str:String=item.track["artwork-url"]

                if (str == "")
                {
                    str=item.user["avatar-url"];
                }

                return str;

            }
        ]]>
    </mx:Script>
    <mx:columns>
        <mx:DataGridColumn dataField="artwork-url"
                           headerText="Art"
                           itemRenderer="components.content.contents.datagrids.ImageRenderer"
                           labelFunction="getImagePath"/>
        <mx:DataGridColumn dataField="title"
                           headerText="Title"
                           minWidth="100"/>
        <mx:DataGridColumn dataField="user"
                           headerText="User"
                           labelFunction="userLabelFunction"/>
        <mx:DataGridColumn dataField="bpm"
                           headerText="BPM"/>
    </mx:columns>
</mx:DataGrid>

我无法设法将该图像 url 值放入我的项目渲染器中

我尝试像这样覆盖设置的数据属性

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
         height="60"
         verticalAlign="top"
         creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import components.content.contents.containers.ContentContainerSoundCloud;
            import mx.core.Application;
            import mx.controls.dataGridClasses.DataGridColumn;
            import com.adobe.viewsource.ViewSource;

            [Bindable]
            public var imgPath:String;

            private function init():void
            {

            }
            override public function set data(value:Object):void
                    {
                        super.data = value.track["artwork-url"];

                        imgPath =super.data.valueOf()
                        trace(imgPath)

                    }
        ]]>
    </mx:Script>

    <mx:Image source="{imgPath}" id="rowimage"/>
</mx:HBox>

但是这样做时跟踪输出看起来像这样

<artwork-url>
  <mx_internal_uid>7C98E149-1984-584C-7600-AD8940BF2A9C</mx_internal_uid>
</artwork-url>

我期望设置数据中的“value”属性接收字符串我从 get imagePathFunction 发送了它，但事实上它返回了我的整个 XMLList。

我做错了什么？

Answer 1

根据您的跟踪输出，您似乎从 dataProvider 中检索了错误的值并将其设置为源。如果没有看到实际数据，就很难知道确切的问题是什么。

也就是说，我会稍微重新设计一下你的 itemRenderer 。首先，您不需要将单个图像放入 HBox 中。只需使用图像即可。另外，您不需要在渲染器中指定高度，DataGrid 应该负责此类定位。

我还删除了creationComplete侦听器，因为其中没有代码。我没有使用绑定，而是在数据集方法中设置组件的源属性。我还将 super.data 设置为值，而不是处理后的值；我在设置值的来源时执行了处理。更新后的代码是这样的：

<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml"
         >
    <mx:Script>
        <![CDATA[
            import components.content.contents.containers.ContentContainerSoundCloud;
            import mx.core.Application;
            import mx.controls.dataGridClasses.DataGridColumn;
            import com.adobe.viewsource.ViewSource;

            [Bindable]
            public var imgPath:String;

            override public function set data(value:Object):void
                    {
                        super.data = value;

                        this.source =value.track["artwork-url"];
                        trace(imgPath)

                    }
        ]]>
    </mx:Script>

</mx:Image>

我在 itemRenderers 中的首选方法是监听 dataChange 事件，但这只是个人喜好。覆盖数据集方法没有任何问题。