Flex 3：如何将图像添加到advancedDataGrid列

Question

我需要修改一个旧的flex 3项目，并且需要创建一个如下所示的advancedDataGrid：

例1

我需要在该列的每一行中添加多个图像。 我有一个数组，其中包含有关需要添加的图像的信息。 在这一点上，我的网格看起来像这样：

例题

其中字母“ C”，“ W”，“ R”，“ A”，“ F”代表我需要添加的图标。 我想我需要做一个渲染，在那里我可以挑选每个字母并将其替换为相应的图像。 但是我发现的所有示例均来自Flex 4，因此无法在此处使用。 我得到的最好的是：

 <mx:AdvancedDataGrid id="myADG" dataProvider = "{gridData}" width="200" height="500" x="800" y="50" >       

        <mx:columns>

            <mx:AdvancedDataGridColumn id="lineColumn" dataField="line">

                  <mx:itemRenderer>
                    <mx:Component>

                    <mx:Image source='{ iconData.line == 'C' ?
                              'resources/icon2312.png' : 'resources/icon2314.png'}' x="200" y="200" visible="true" />
                    </mx:Component>
                </mx:itemRenderer>

            </mx:AdvancedDataGridColumn>

        </mx:columns>

    </mx:AdvancedDataGrid>

这使我可以在每一行中插入图像，但是我不知道如何添加多个图像。 我应该解析字符串并将每个字母放在单独的列中吗？ 还是有更简单的方法？

Answer 1

如果同时存在的图标很少，则可以这样做，添加最大图像数的图像。这里为2，则可以添加更多图像。

     <mx:itemRenderer>
          <mx:HBox>

                <mx:Image source='{ iconData.line1 == 'C' ?
                          'resources/icon2312.png' : 'resources/1.png'}' x="200" y="200" visible={ iconData.line1 == 'C'} includeInLayout={iconData.line1 == 'C'}/>

                <mx:Image source='{ iconData.line2 == 'W' ?
                          'resources/icon2312.png' : 'resources/2.png'}' x="200" y="200" visible="{ iconData.line2 == 'W'}" includeInLayout={iconData.line2 == 'W'}/>
          </mx:HBox>
      </mx:itemRenderer>

使用includeLayout隐藏或显示图像

我使用了iconData.line1 =='C'来检查是否需要显示一张图片，您可以使用bit xor进行检查

//Use iconData.t to save the show info. If include 'A', iconData.t = 0x1, 
//if include 'W', iconData.t = 0x10. And if inluce 'A' and 'W', iconData.t = 0x11

<mx:Image visible={iconData.t ^ 0x1 == 0}/> //image 'A'
<mx:Image visible={iconData.t ^ 0x10 == 0}/> //image 'W'