ProgressBar作为datagrid flex 3中的itemRendrer答案

【问题标题】：ProgressBar as itemRendrer in datagrid flex 3ProgressBar作为datagrid flex 3中的itemRendrer
【发布时间】：2015-07-21 16:56:39
【问题描述】：

我需要在数据网格中放置一个进度条，但没有显示任何内容：

这是我的代码：

数据提供者

private var provider:ArrayCollection = new ArrayCollection([
                        {data:'1',progress:"10"},
                        {data:'2',progress:"50"}]);

数据网格

<mx:DataGrid id="myGrid" width="100%"
            dataProvider="{provider}" x="0" editable="true">
            <mx:columns>
                <mx:DataGridColumn dataField="data" />

                <mx:DataGridColumn dataField="nombreUser"  >
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:ProgressBar minimum="0" maximum="100" />
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns> 
        </mx:DataGrid>

需要你们的帮助，提前致谢。

【问题讨论】：

参考link。
只需要使用 flex 3 来做到这一点：/

标签： actionscript-3 apache-flex datagrid actionscript progress-bar

【解决方案1】：

进度条需要使用manual 模式。这是 Flex 3 的完整工作示例。ItemRenderer CustomProgressbarItemRenderer 是：

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
    <mx:Script>
        <![CDATA[
            private function updateCurrentValue():void 
            {
                pb.setProgress(data.progress,100);
            }
        ]]>
    </mx:Script>
    <mx:ProgressBar id="pb" minimum="0" maximum="100" mode="manual" updateComplete="updateCurrentValue()"/>
</mx:Canvas>

主要应用是：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" xmlns:local="*">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var provider:ArrayCollection = new ArrayCollection([
                {data:'1',progress:"10"},
                {data:'2',progress:"40"}]);

                protected function button1_clickHandler(event:MouseEvent):void
                {
                    provider.getItemAt(0).progress = 50;
                }
        ]]>
    </mx:Script>
    <mx:VBox width="100%" height="100%">
        <mx:DataGrid id="myGrid" width="100%"
                     dataProvider="{provider}" x="0" editable="true">
            <mx:columns>
                <mx:DataGridColumn dataField="data" />
                <mx:DataGridColumn dataField="progress">
                    <mx:itemRenderer>
                        <mx:Component>
                            <local:CustomProgressbarItemRenderer/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
        <mx:Button label="Update" click="button1_clickHandler(event)"/>
    </mx:VBox>
</mx:Application>

点击按钮后，0th 项目的进度将更新为 50。

【讨论】：