Flex - 类型化 ArrayCollection 作为 Horizontallist 的数据提供者答案

【问题标题】：Flex - Typed ArrayCollection as Horizontallist's dataproviderFlex - 类型化 ArrayCollection 作为 Horizontallist 的数据提供者
【发布时间】：2010-03-08 15:21:50
【问题描述】：

我有一个对象的 ArrayCollection。我将此数组作为数据提供者传递给水平列表，并且我正在使用自定义 itemRenderer。

执行应用程序时，显示水平列表

[object CustomClass][object CustomClass][object CustomClass][object CustomClass]

我尝试将 itemrenderer 中的每个对象转换如下：

<mx:Label text="{(data as CustomClass).label1}"/>

但它不起作用......

感谢您提供的任何帮助。问候，

BS_C3

编辑 - 2010 年 3 月 9 日

让我们再写一些代码 =)

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Component id="Item">
        <mx:VBox width="180">
            <mx:HBox width="100%">
                <mx:Spacer width="100%"/>
                <mx:Button label="x"/>
            </mx:HBox>
            <mx:Image id="thumbnail"/>
            <mx:Label width="100%" horizontalCenter="0" text="Collection"/>
            <mx:HBox width="100%">
                <mx:Label width="100" text="GIA"/>
                <mx:Label text="{data.charg_st}"/>
            </mx:HBox>
            <mx:HBox width="100%">
                <mx:Label width="100" text="Finger Size"/>
                <mx:Label text="xxxxxx"/>
            </mx:HBox>
            <mx:HBox width="100%">
                <mx:Label width="100" text="Carat"/>
                <mx:Label text="{data.carats}"/>
            </mx:HBox>
            <mx:HBox width="100%">
                <mx:Label width="100" text="Color"/>
                <mx:Label text="{data.color}"/>
            </mx:HBox>
            <mx:HBox width="100%">
                <mx:Label width="100" text="Clarity"/>
                <mx:Label text="{data.clarity}"/>
            </mx:HBox>
            <mx:HBox width="100%">
                <mx:Label width="100" text="Shop"/>
                <mx:Label text="{data.lgort_fp}"/>
            </mx:HBox>
            <mx:HBox width="100%">
                <mx:Label width="100" text="Resizing"/>
                <mx:Label text="{data.resizing}"/>
            </mx:HBox>
            <mx:HBox width="100%">
                <mx:Label width="100" text="Price Excl. VAT"/>
                <mx:Label text="{data.net_price_fp}"/>
            </mx:HBox>
        </mx:VBox>
    </mx:Component>


    <mx:HorizontalList
        dataProvider="{GlobalData.instance.tray}" 
        columnCount="4"
        rowCount="1"
        horizontalScrollPolicy="off"
        itemRenderer="{Item}"
    />
</mx:Canvas>

仅供参考，horizonalList 数据提供者是对象的 ArrayCollection。

现在，水平列表正在显示空项目...具有正确的宽度... arraycollection 不为空（我正在对项目的单击事件使用警报，并且确实检索了预期的数据）。

希望这会有所帮助>_

问候， BS_C3

【问题讨论】：

你能添加更多代码或完整的测试用例吗？
没人有办法吗？我一直在尝试不同的解决方案，但它仍然不起作用。 itemrenderer 中的所有内容都显示为“BLANK”。就好像物品在那里，但有东西在隐藏它。我添加了一个 itemClick 事件来显示项目的数据，它确实显示...我还重新创建了 arraycollection 作为对象的arraycollection ...并且它不会改变水平列表的行为。还是得到一个空白项...我真的不明白>_

标签： apache-flex dataprovider arraycollection typed

【解决方案1】：

你试过了吗

<mx:Label text="{data.label1}"/>

？（label1 是您的对象的属性）

【讨论】：

嗨！是的，这是我做的第一件事，但没有奏效。我得到的是类似 [object Object] [object Object] [object Object] ... 鉴于它不起作用，我使用强制转换的“数据”作为“自定义类”类型的对象。但它也没有工作...... -_-'
有趣，那么请确保您的数据类型是“可打印的”。
嗨！ “可打印”是什么意思？

【解决方案2】：

使用列表中的labelField 字段，请参阅here

<mx:List dataProvider="{myDataProvider}" labelField="label1"/>

【讨论】：

嗨！感谢您的回答，但您的解决方案不适合我的问题......我创建的项目渲染器有很多控件，我对所有控件都有同样的问题......（其他标签、图像等...... .) 还有其他想法吗？

【解决方案3】：

尝试将您的自定义类声明为组件中某处的变量。声明类的实例后，Flex 可能会更成功地识别类的属性。

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      private var myClass:CustomClass;
    ]]> 
  </mx:Script>
    <mx:Component id="Item">
        <mx:VBox width="180">
         ...

thelost 他的代码也正确。你应该可以使用

<mx:Label text="{data.label1}"/>

在您的itemRenderer 中访问您的类的属性。

编辑：我确定你已经这样做了，但还要仔细检查你是否已将 HorizontalList 中的 dataProvider 设置为 [Bindable] 声明的 CustomClass。

【讨论】：

【解决方案4】：

我设法解决了我的问题。

当我去掉itemrenderer的vbox的width属性后，所有的数据都出现在了horizontalList中。为什么？我不知道为什么，但它似乎将数据定位在水平列表可见范围之外的某个地方（嗯？？）。

问题是现在一切正常。对于最终代码，您有：

水平列表：

<mx:HorizontalList id="hlist"
    dataProvider="{TrayData.instance.itemsCollection}" 
    columnCount="{TrayData.instance.hlistColumns}"
    rowCount="1"
    itemRenderer="components.TrayItem"
    horizontalScrollPolicy="off"
    horizontalCenter="0" verticalCenter="0"
    borderStyle="none"
    horizontalScrollPosition="{TrayData.instance.hsPosition}"
    />

ItemRenderer：

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >

    <mx:HBox width="100%">
        <mx:Spacer width="100%"/>
        <mx:Button label="x"/>
    </mx:HBox>
    <mx:HBox width="100%">
        <mx:Spacer width="15%"/>
        <mx:VBox width="70%">
            <mx:Image id="thumbnail" horizontalAlign="center"/>
            <mx:Label width="100%" textAlign="center" text="Collection"/>
            <mx:HBox width="100%">
                <mx:VBox id="labelBox" width="100">
                    <mx:Label width="100" text="GIA"/>
                    <mx:Label width="100" text="Finger Size"/>
                    <mx:Label width="100" text="Carat"/>
                    <mx:Label width="100" text="Color"/>
                    <mx:Label width="100" text="Clarity"/>
                    <mx:Label width="100" text="Shop"/>
                    <mx:Label width="100" text="Resizing"/>
                    <mx:Label width="100" text="Price"/>
                </mx:VBox>
                <mx:VBox id="dataBox" width="100%" horizontalAlign="left">
                    <mx:Label text="{data.resizingCode + ' ' + data.charg_st}"/>
                    <mx:Label text="{data.fingerSize}"/>
                    <mx:Label text="{((new Number(data.carats))/100).toString()}"/>
                    <mx:Label text="{data.color}"/>
                    <mx:Label text="{data.clarity}"/>
                    <mx:Label text="{data.lgort_fp}"/>
                    <mx:Label text="{data.net_price_fp}"/>
                </mx:VBox>
            </mx:HBox>
            <mx:Button label="Order" enabled="{data.product_type == 'C'}" width="50%"/>
        </mx:VBox>
        <mx:Spacer width="15%"/>
    </mx:HBox>

</mx:VBox>

问候， BS_C3

【讨论】：