使用 itemrenderer 显示 Flex 进度条列表

发布于 2024-09-25 01:21:03 字数 691 浏览 6 评论 0原文

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

 <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 字段发生变化时我想更新进度条“progress”值到currentValue（其中进度条的最小值和最大值存储在数组“arr”中）

我该如何做同样的事情。

谢谢大家

原文

I want to create a list of progress bars and update the list accordingly.
I have group data in an Array as

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

The values in the array object indicate name of group,minimum,maximum and current value
for the group (to be used in progressbar).

I used the list with "mx.controls.ProgressBar" as itemRenderer as

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

Now what I need is whenever currentValue field of Array "arr" changes i want to update the progressbar "progress" value to currentValue (where min and maximum value of progressbar are stored in Array "arr")

How can i do the same.

Thanks all

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谷夏 2024-10-02 01:21:03

我猜你的进度条没有显示任何内容，因为所有这些都是错误的。项目渲染器是一个类，它通过函数set data(value:Object):void从数据提供者获取单个项目。要获取 ProgressBar 内的值，您可以对其进行子类化，添加数据函数（getter 和 setter）并从那里设置属性 - 该类将是项目渲染器。

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

回复收藏 0 原文

猛虎独行 2024-10-02 01:21:03

诀窍是将进度条的模式设置为手动，因为您不会自动侦听下载数据的任何进度。您想要设置一个值，以便进度条可以自行更新，因此手动是可行的方法。此外，请检查一下：

<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 设置为进度条时，它会自动尝试查找数据源，但在您的情况下，您将自己提供和更新。因此，您可能需要一个项目渲染器来执行一些操作。

The trick is to set the mode of progressbar to manual since you are not automatically listening to any progress of a downloaded data. You want to set a value so progress bar could update itself so manual is the way to go. Moreover, check this out :

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

Here is the itemrenderer code, you'll see the mode as manual :

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

When you simply set itemrenderer to a progressbar, it automatically tries to find a datasource but in your case you'll be feeding and updating yourself. So, you'll need an itemrenderer where you do some operations maybe.

回复收藏 0 原文

虐人心 2024-10-02 01:21:03

大家好
感谢您的回答..
经过更多谷歌搜索后，我发现了与我需要的类似的东西
http://www.flex-blog.com/progressbar-in-datagrid- example/

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