使用itemrenderer显示弹性进度条列表

时间:2010-09-25 08:04:04

标签: flex actionscript-3 flex3 itemrenderer

我想创建一个进度条列表并相应地更新列表。 我在数组中有组数据

 <mx:Array id="arr">
        <mx:Object label="Group One" min="0" max="200" currentValue="60" />
        <mx:Object label="Group Two" min="0" max="300" currentValue="50" />
 </mx:Array>

数组对象中的值表示组的名称,最小值,最大值和当前值 对于小组(在进度条中使用)。

我使用带有“mx.controls.ProgressBar”的列表作为itemRenderer

<mx:List width="100%" dataProvider="{arr}"
        itemRenderer="mx.controls.ProgressBar"/>

现在我需要的是当数组“arr”的 currentValue 字段发生更改时我想将进度条“进度”值更新为 currentValue (其中进度条的最小值和最大值存储在数组“arr”中)

我怎么能这样做。

全部谢谢

3 个答案:

答案 0 :(得分:1)

我猜你的ProgressBars什么都没显示,因为一切都是错的。项呈示器是一个通过function set data(value:Object):void从数据提供者获取单个项目的类。要在ProgressBar中获取值,可以对其进行子类化,添加数据函数(getter和setter)并从中设置属性 - 此类将是项呈示器。

接下来,不保证itemRenderers始终被实例化。 List会根据需要显示它们,并将未使用的存储在池中。这意味着您无法与特定列表项进行对话 - 池中的任何项目都可以发挥其作用(获取其数据)。要更改进度,您需要更新数据提供程序,然后重新设置它。

答案 1 :(得分:1)

诀窍是将进度条的模式设置为手动,因为您没有自动收听下载数据的任何进度。您想要设置一个值,以便进度条可以自行更新,因此手动是可行的方法。此外,请查看:

<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
    <s:HorizontalLayout/>
</s:layout>
<fx:Declarations>
    <s:ArrayCollection id="arr">
        <fx:Object label="Group One" currentValue="20" max="200" min="0"/>
        <fx:Object label="Group Two" currentValue="50" max="300" min="0"/>
    </s:ArrayCollection>
</fx:Declarations>
<fx:Script>
    <![CDATA[
        private function updateArr():void {
            arr.getItemAt(0).currentValue = ns.value;
        }
    ]]>
</fx:Script>
<s:List dataProvider="{arr}"  itemRenderer="ProgressBarWithCurrentValue"/>
<s:NumericStepper id="ns" maximum="200" minimum="0" stepSize="10" value="20" change="updateArr()"/></s:Application>

这是itemrenderer代码,您将看到模式为手动:

<s:ItemRenderer autoDrawBackground="true" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
    <![CDATA[
        private function updateCurrentValue():void {
            pb.setProgress(data.currentValue, data.max);
        }
    ]]>
</fx:Script>
<mx:ProgressBar id="pb" maximum="{data.max}" minimum="{data.min}" mode="manual" updateComplete="updateCurrentValue()"/></s:ItemRenderer>

当您只是将itemrenderer设置为进度条时,它会自动尝试查找数据源,但在您的情况下,您将自己进行更新和更新。所以,你需要一个itemrenderer,你可以在那里做一些操作。

答案 2 :(得分:0)

大家好 谢谢你的回答..
谷歌搜索后,我发现类似于我需要的东西
http://www.flex-blog.com/progressbar-in-datagrid-example/

非常类似于上面的2个答案..来自@kubarium和@alxx ..
  1.使用ItemRenderer在DataGrid中显示ProgressBar   2.为DataGrid创建DataProvider   3.创建一个动作来启动ProgressBar
  4.确保在每次进度时更新ArrayCollection  进度。