`

flex datagrid中显示进度条demo

    博客分类:
  • flex
阅读更多
<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="application1_creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.FlexEvent;

			[Bindable]
			private var employees:ArrayCollection=new ArrayCollection([{name:"test1",count:1,total:10},{name:"test2",count:1,total:10},{name:"test3",count:1,total:10}]);
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
			}


			


			protected function button1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				if(dg.selectedItem!=null){
					var d:Object=dg.selectedItem;
					d.count=int(d.count)+1;
					employees.setItemAt(d,employees.getItemIndex(d));
				}else{
					Alert.show("请先选择数据!");
				}
			}

		]]>
	</fx:Script>
	
	<mx:Panel title="DataGrid Control Example" height="100%" width="100%" 
			  paddingTop="10" paddingLeft="10" paddingRight="10">
		<s:Button label="点击" click="button1_clickHandler(event)"/>
	
		<mx:Label width="100%" color="blue"
				  text="Select a row in the DataGrid control."/>
		
		<mx:DataGrid id="dg" width="100%" height="100%"  dataProvider="{employees}">
			<mx:columns>
				<mx:DataGridColumn dataField="name" headerText="Name"/>
				<mx:DataGridColumn  headerText="进度条">
					<mx:itemRenderer>
						<fx:Component>
							<mx:Canvas updateComplete="updateCompleteHandler(event,data)" creationComplete="canvas1_creationCompleteHandler(event,data)" >
								<fx:Script>
									<![CDATA[
										import mx.controls.Alert;
										import mx.events.FlexEvent;

										protected function updateCompleteHandler(event:FlexEvent,d:Object):void
										{
											// TODO Auto-generated method stuba
											
											pb.setProgress(Number(d.count),Number(d.total));
										}


										protected function canvas1_creationCompleteHandler(event:FlexEvent,d:Object):void
										{
											pb.minimum=0;
											pb.maximum=Number(d.total);
											// TODO Auto-generated method stub
										}

									]]>
								</fx:Script>
							<mx:ProgressBar    direction="right" mode="manual" width="100%" id="pb">
								
							</mx:ProgressBar>
							</mx:Canvas>
						</fx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
	
		
	</mx:Panel>
</mx:Application>        

分享到:
评论

相关推荐

    flex datagrid 前台 分页

    Flex DataGrid是一款强大的数据展示组件,常用于Adobe Flex或Flash Builder等开发环境中。它能够高效地展示大量数据,并提供丰富的用户交互功能。在本场景中,我们关注的是“前台分页”这一技术。 前台分页是指在...

    Flex Datagrid checkbox实现

    Flex Datagrid 是Adobe Flex框架中用于展示数据集的组件,它允许开发者以表格形式展示数据,并提供多种交互功能。在Flex应用中,Datagrid经常被用于处理和展示大量的结构化数据。在标题“Flex Datagrid checkbox实现...

    flex DataGrid 表头分组

    3. **配置`AdvancedDataGrid`组件**:Flex中的`AdvancedDataGrid`相对于基础的`DataGrid`提供了更丰富的功能,包括表头分组。在`AdvancedDataGrid`中,我们需要设置`&lt;mx:columns&gt;`子元素来定义列,并为需要分组的列...

    flex-datagrid-advancedDataGrid-demo

    在Flex中,DataGrid通常与ArrayCollection或XMLListCollection等数据源绑定,以便动态加载和显示数据。开发者可以通过定义columns属性来自定义列头,通过itemRenderer属性来定制单元格的显示样式。 然而,当数据...

    flex datagrid 嵌套checkbox实现全选

    Flex DataGrid是Adobe Flex框架中的一个组件,用于显示结构化的数据集。它可以自动生成列,并根据数据源动态调整大小。DataGrid支持排序、分页、筛选等功能,是UI设计中处理大量数据的首选组件。 2. **嵌套复选框...

    Flex dataGrid 全选、反选

    在Flex编程中,DataGrid组件是用于展示结构化数据的强大工具。它允许用户对数据进行排序、筛选和编辑。在实际应用中,我们经常需要实现全选和反选功能,以便用户可以一次性选择或取消选择所有条目。本文将详细讨论...

    flex datagrid中实现显示序列号

    当我们需要在DataGrid中显示序列号时,通常会利用`itemRenderer`功能来实现。`itemRenderer`是Flex提供的一种自定义数据显示的方式,允许我们对每个单元格的数据进行定制化处理。在本篇文章中,我们将深入探讨如何在...

    Flex dataGrid 自定义显示列

    本篇文章将深入探讨Flex中的数据Grid组件以及如何自定义显示列,这对于提升用户体验和增强数据展示功能至关重要。 Flex DataGrid是MXML组件库中的一个控件,它允许开发者以网格形式展示数据集合。这种组件特别适用...

    在flex的dataGrid控件中显示图片的实践

    在Flex中显示图片通常涉及到以下步骤: 1. **数据模型**:首先,我们需要定义一个数据模型,包含用于存储图片二进制数据的字段。在Spring和Hibernate的环境中,这通常是一个Java实体类,例如`ImageEntity`,包含一...

    将Flex DataGrid数据导出到Excel中

    在开发基于Adobe Flex的应用程序时,我们经常遇到需要将数据展示在用户友好的方式中,例如使用DataGrid组件。然而,有时用户希望将这些数据显示在更传统的格式中,如Microsoft Excel电子表格。本教程将详细介绍如何...

    flex DataGrid中文字符排序类

    `SortUtil`类为解决Flex DataGrid中的中文字符排序问题提供了一种实用的方法。通过对关键常量和`CHAR_LIB`数组的理解与运用,开发者可以轻松地为自己的项目添加强大的中文排序功能。此外,通过参考提供的链接(...

    flex datagrid 表格 合计

    Flex DataGrid 是 Adobe Flex 框架中的一个组件,它用于在应用程序中显示表格数据。在Flex中,实现数据网格的总计功能是一项常见的需求,它能够帮助用户快速地理解和分析大量数据。本项目提供了一个已经实现了总计...

    flex datagrid

    2. **DataGrid组件**:DataGrid是Flex中用于展示表格数据的关键组件。它可以绑定到各种数据源,如ArrayCollection、XMLList或远程服务返回的数据。DataGrid支持动态列生成,可以自定义列的显示和行为。 3. **...

    flex datagrid 实现合计功能控件包

    flex datagrid 实现合计功能控件包 带源码,demo fxp是flex4的工程文件,导入到工作空间即可 直接导入项目即可。 更多访问我的blog www.dplayer.net

    FLEX的datagrid合计、平均值

    在Flex开发中,Datagrid组件是用于展示数据集的一个强大工具,它允许用户以表格的形式查看和操作数据。本文将深入探讨如何在Flex的Datagrid中实现数据的合计与平均值计算,帮助开发者更好地理解和应用这些功能。 ...

    flex DataGrid xml 动态数据列表实例

    3. **创建`DataGrid`**:在Flex中,我们先创建一个`DataGrid`实例,并设置其相关属性,如列的宽度和是否可排序等。 4. **绑定数据**:将解析后的XML数据绑定到`DataGrid`。这通常通过`dataProvider`属性完成。`data...

    flex DataGrid改变指定行的背景颜色

    在Flex中,我们可以使用ItemRenderer来自定义单元格的显示方式,包括改变背景颜色。 1. **自定义ItemRenderer** 要改变指定行的背景颜色,我们需要创建一个自定义的ItemRenderer类。ItemRenderer是一个Flex组件,...

    Flex DataGrid CheckBox 一个简单的全选

    在Flex中,可以通过监听CheckBox的change事件,当全选CheckBox被勾选时,遍历所有行并设置其对应的CheckBox为选中状态。反之,当全选CheckBox取消选中时,将所有行的CheckBox设为未选中。这需要对DataGrid的...

Global site tag (gtag.js) - Google Analytics