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>

我无法将该图片网址值设置为我的项目渲染器

我已尝试覆盖set data属性，如此

<?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>

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

我做错了什么？

Answer 1

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

那就是说，我会稍微重新处理你的itemRenderer。首先，您不需要在HBox中放置单个图像。只需使用图像。此外，您不需要在Renderer中指定高度，DataGrid应该负责这样的定位。

我还删除了creationComplete监听器，因为其中没有代码。而不是使用绑定，我只是在数据集方法中的组件上设置soruce属性。我还将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事件，但这只是个人偏好。重写数据集方法没有错。

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

1 个答案: