<?xml version="1.0"?>
<!-- Main application to print a DataGrid control on multiple pages. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				initialize="initData();">
	<mx:Script>
		<![CDATA[
			import mx.printing.*;
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
			import mx.events.ItemClickEvent;


			// Declare variables and initialize simple variables.
			[Bindable]
			public var dgProvider:ArrayCollection;
			public var footerHeight:Number=20;
			public var prodIndex:Number;
			public var prodTotal:Number=0;

			// Data initialization.
			public function initData():void
			{
				// Create the data provider for the DataGrid control.
				dgProvider=new ArrayCollection;
			}

			// Fill the dgProvider ArrayCollection with the specified items.
			public function setdgProvider(items:int):void
			{
				prodIndex=1;
				dgProvider.removeAll();
				for (var z:int=0; z < items; z++)
				{
					var prod1:Object={};
					prod1.Qty=prodIndex * 7;
					prod1.Index=prodIndex++;
					prodTotal+=prod1.Qty;
					dgProvider.addItem(prod1);
				}
			}

			//add function 
			public function addFunction()
			{
				var prod2:Object={};
				prod2.Qty=11 * 7;
				prod2.Index=22;
				dgProvider.addItem(prod2);


			}

			//del function
			public function delFunction()
			{
				if (myDataGrid.selectedItems == null)
					return;
				var index:int=null;
				var seledIndexs:Array=myDataGrid.selectedIndices;
				for (var i=0; i < seledIndexs.length; i++)
				{
					index=seledIndexs[i];
					dgProvider.removeItemAt(index);
				}
			}

			//mod function
			public function modFunction()
			{
				var index:int=myDataGrid.selectedIndex;
				if (index < 0)
					return;
				dgProvider.enableAutoUpdate();
				var obj:Object=dgProvider.getItemAt(index);
				obj.Qty=11111111111111111 * 7;
				obj.Index=222222222222222222;
				//下面的这句必须要加上，目标是 局部更新页面显示
				dgProvider.itemUpdated("", "", "", "");
			}
			private function clickHandler(event:ItemClickEvent):void
			{
				if (event.label == "增加")
				{
					addFunction();
				}
				else if (event.label == "删除")
				{
					delFunction();
				}
				else if (event.label == "修改")
				{
					modFunction();

				}
				else if (event.label == "查找")
				{
					setdgProvider(int(dataItems.text))
				}

			}
		]]>
	</mx:Script>

	<mx:Panel title="DataGrid 的增删改查 实例"
			  height="75%"
			  width="75%"
			  paddingTop="10"
			  paddingBottom="10"
			  paddingLeft="10"
			  paddingRight="10">
		<mx:VBox>
			<mx:Text width="100%"
					 color="blue"
					 text="Specify the number of lines and click Fill Grid first. Then you can click Print."/>
			<mx:TextInput id="dataItems"
						  text="5"/>
			<mx:ButtonBar itemClick="clickHandler(event);">
				<mx:dataProvider>
					<mx:Array>
						<mx:String id="add">增加</mx:String>
						<mx:String id="del">删除</mx:String>
						<mx:String id="mod">修改</mx:String>
						<mx:String id="search">查找</mx:String>
					</mx:Array>
				</mx:dataProvider>
			</mx:ButtonBar>
			<!--
				 选用AdvancedDataGrid的原因是此控件支持多选。
			-->
			<mx:AdvancedDataGrid id="myDataGrid"
								 selectable="true"
								 selectionMode="multipleRows"
								 dataProvider="{dgProvider}">
				<mx:columns>
					<mx:AdvancedDataGridColumn dataField="Index"/>
					<mx:AdvancedDataGridColumn dataField="Qty"/>
				</mx:columns>
			</mx:AdvancedDataGrid>
		</mx:VBox>

	</mx:Panel>
</mx:Application>