Question

我在我的空中应用程序的不同位置使用下拉列表。对于那些数据提供者，总是一个数组集合，但有些字段有一个字段，比如

案例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

有一种很好的方法可以更改渲染器“视图”HERE
请务必阅读评论。

Answer 2

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

foo

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

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

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

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

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

这是伪代码，但这是要点

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

如何使用不同的arraycollection字段皮肤下拉列表

2 个答案: