如何使用不同的数组集合字段来设置下拉列表的外观

Question

我在空中应用程序的不同位置使用下拉列表。 对于那些 dataprovider 来说，总是一个 arraycollection，但有些只有一个字段，如

情况 1

var collection:ArrayCollection = new ArrayCollection(["foo", "foo2", "foo3"]);

，有时 arraycollection 用其他方法填充有多个字段：

情况 2

var collection:ArrayCollection = new ArrayCollection (
                [{DESC:"foo", ID:"0"},
                {DESC:"foo1", ID:"1"},
                {DESC:"foo2",ID:"2"},
                {DESC:"foo3", ID:"3"}
                ]
                );

在这种情况下，labelField 是 Desc。

因此，我喜欢自定义 DDL，并为标签部分创建带有 itemrender 的皮肤：

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


    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
        <s:State name="selected"/>
    </s:states>
    <s:Label text="{data}" backgroundColor.selected="#1B5790" color.selected="white"
             backgroundColor.hovered="#E1DFD2" color.hovered="white" fontWeight.hovered="bold"
             width="100%" height="25" paddingLeft="5" paddingTop="5" styleName="myLabelBlack" toolTip="{data}"/>

</s:ItemRenderer>

此方法适用于示例 1 (arListBank)，但在情况 2 中显示 [Object object]。

所以我的目标是在两个中拥有相同的 itemrenderer案件。

你能帮我吗？

谢谢

Answer 1

有一个很好的方法来更改渲染器“视图”此处

请务必阅读评论。

Answer 2

我将假设此时不可能更改您的数据结构，然后从那里开始。请记住，传入 itemRenderer 的数据元素代表 dataProvider 中的单个项目。在第一种情况下，它将是一个字符串，如下所示：

foo

在第二种情况下，它将是一个对象，如下所示：

{DESC:"foo", ID:"0"}

因此，在第一种情况下，您的标签会正确显示，因为它是一个字符串。在第二种情况下，Flex 将对您的对象运行 toString() 方法，并返回您所看到的 [Object object] 名字对象。

要在一个 itemRenderer 中执行此操作，您需要更新标签上文本的设置方式。步骤是这样的：

1）去掉标签绑定的文本属性
2）监听ItemRenderer组件上的dataChange事件
3) 在 dataChange 事件处理程序中，检查您拥有的数据类型，并使用它根据数据类型有条件地设置标签上的文本值。

这是伪代码，但这是要点

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
   protected function onDataChange(event:Event):void{
       if(data is Object){
         labelDisplay.text = data.DESC;
       } else {
         labelDisplay.text = data;
      }
   }
</fx:Script>
<s:states>
    <s:State name="normal"/>
    <s:State name="hovered"/>
    <s:State name="selected"/>
</s:states>
<s:Label id="labelDisplay" backgroundColor.selected="#1B5790" color.selected="white"
         backgroundColor.hovered="#E1DFD2" color.hovered="white" fontWeight.hovered="bold"
         width="100%" height="25" paddingLeft="5" paddingTop="5" styleName="myLabelBlack" toolTip="{data}"/>

[使用相同的方法设置工具提示]

不过，有很多不同的方法可以做到这一点。您可以使用基本组件创建一个超类并扩展它，覆盖相应数据类型的 onDataChange 事件处理程序。然后，您将拥有三个组件（超级组件、作为字符串组件的数据和作为对象组件的数据），但您将重用大部分代码。

如果您为第二个 dataProvider 定义了显式对象类型，则只需实现自定义 toString() 方法即可返回描述并使用您定义的原始 itemRenderer。