flex datagrid中显示进度条demo

最新推荐文章于 2016-12-17 14:17:42 发布

原创最新推荐文章于 2016-12-17 14:17:42 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #XML

flex 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个使用Adobe Flex创建的数据网格示例应用，该应用通过DataGrid组件展示数据集合，并利用ProgressBar显示所选项目的进度。用户可以点击按钮来增加选定项的计数，从而更新进度条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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