Flex progressbar in datagrid

最新推荐文章于 2017-06-13 21:14:40 发布

sebastain

最新推荐文章于 2017-06-13 21:14:40 发布

阅读量883

点赞数

分类专栏： Flex 文章标签： datagrid flex function callback import null

Flex 专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何在数据网格中嵌入进度条组件，并通过数据提供者动态更新进度值。关键步骤包括设置<mx:itemRenderer>来定义单元格内容、从数据源获取进度值并设置到进度条上，以及在数据刷新后触发进度条更新。

Embed progressbar in datagrid 
See the code below.

The key point is <mx:itemRednderer> ... .This seqment can embed component into datagrid.

fetch data to set progressbar 
The key point is this.data["progress"]. The this.data["progress"] is the value getted from dataprovider.

trigger to update progressbar 
This key point is updateComplete handler which is called when dataprovider is refreshed. So we

can update progressbar in updateComplete callback function.

 <mx:AdvancedDataGridColumn id="progressshow" width="300" dataField="progress"
            headerText="进度">
   <mx:itemRenderer>
    <fx:Component>
     <mx:HBox creationComplete="hbox1_creationCompleteHandler(event)"
        updateComplete="hbox1_updateCompleteHandler(event)">
      <fx:Script>
       <![CDATA[
        import mx.events.FlexEvent;
        
        protected function hbox1_updateCompleteHandler(event:FlexEvent):void
        {
         if(this.data != null)
         {
          trace(this.data["progress"]);
          pd.setProgress(this.data["progress"], 100);
          pd.label = "已完成" + pd.percentComplete + "%";
         }
         
        }
        
        protected function hbox1_creationCompleteHandler(event:FlexEvent):void
        {
         pd.setProgress(0, 100);
         pd.label = "已完成" + pd.percentComplete + "%";
         
        }
        
       ]]>
      </fx:Script>
      <mx:ProgressBar id="pd" width="280" maximum="100" minimum="0" mode="manual">
      </mx:ProgressBar> 
     </mx:HBox>
    </fx:Component>
   </mx:itemRenderer>
   </mx:AdvancedDataGridColumn>