FLEX 4.6 Spark DataGrid 一些的用法

本文链接：https://blog.csdn.net/xhhuang1979/article/details/8331682

Datagrid是我们比较常用的一个控件，在FLEX3中的，我想网上的资料很多。到了4.5后换成Spart可能有些用法不用上了，在网上查了一些例子，整合在一起，当给自己作个笔记，也希望能对别人有个参考。

<?xml version="1.0" encoding="utf-8"?>
<s: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" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			[Bindable]
			public static var initDG:ArrayCollection = new ArrayCollection([
				{Artist:'01', Album:'Album 01', Year:'2008'},
				{Artist:'01', Album:'Album 02', Year:'2009'},
				{Artist:'03', Album:'Album 03', Year:'2007'},
				{Artist:'03', Album:'Album 04', Year:'2003'},
				
			]); 
			
		]]>
		
	</fx:Script>
	
	
	<s:VGroup>
		<s:DataGrid id="myGrid" width="360" dataProvider="{initDG}">   
			<s:columns>
				<s:ArrayList>
					<s:GridColumn dataField="Artist"    headerText="Artist"/>
					<s:GridColumn dataField="Album" headerText="Album"/>
					<s:GridColumn dataField="Year" headerText="Year" itemRenderer="CellRenderer"/>
				</s:ArrayList>
			</s:columns>       
		</s:DataGrid> 
	</s:VGroup>
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
	
	<fx:Script>
		<![CDATA[
			override public function prepare(hasBeenRecycled:Boolean):void {
				lblData.text = data[column.dataField]
				if(this.data) {
					lblData.text = data[column.dataField];
					
					if(this.data.Year >= 2008&&this.data.Artist==01)
						bgColor.color = 0xFF0000;
				//	bgColor.alpha=0;
					else
					bgColor.alpha=0;
				}
			}
		]]>
	</fx:Script>
	
	<s:Rect top="0" bottom="0" left="0" right="0">
		<s:fill>
			<s:SolidColor id="bgColor" color="0xFFFFFF"/>
			
		</s:fill>
	</s:Rect>
	<s:Label id="lblData" top="9" left="7" width="100%" height="100%" textAlign="center"/>
	
</s:GridItemRenderer>

<?xml version="1.0" encoding="utf-8"?>
<s: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" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			// Data includes URL to album cover.
			[Bindable]
			private var initDG:ArrayCollection = new ArrayCollection([
				{Artist:'Pavement', Album:'Slanted and Enchanted', 
					Price:11.99, Cover:'../assets/slanted.jpg', tabIndex:2},
				{Artist:'Pavement', Album:'Slanted and Enchanted', 
					Price:11.99, Cover:'../assets/slanted.jpg', tabIndex:3},
				{Artist:'Pavement', Album:'Slanted and Enchanted', 
					Price:11.99, Cover:'../assets/slanted.jpg', tabIndex:4},
				{Artist:'Pavement', Album:'Brighten the Corners', 
					Price:11.99, Cover:'../assets/brighten.jpg', tabIndex:5}
			]);
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
	
	<s:DataGrid id="myGrid" 
				hasFocusableChildren="true" tabEnabled="true" tabChildren="true" focusEnabled="true" tabFocusEnabled="true"
				dataProvider="{initDG}" selectionMode="singleCell" tabIndex="1"
				variableRowHeight="true">   
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="Artist" rendererIsEditable="true">
					<s:itemRenderer>
						<fx:Component>
							<s:GridItemRenderer hasFocusableChildren="true" tabEnabled="true" tabChildren="true" focusEnabled="true" tabFocusEnabled="true" 
												selectAll="meBtn.setFocus()">
								<fx:Script>
									<![CDATA[
										import mx.controls.Alert;
										
									]]>
								</fx:Script>
								<s:Button id="meBtn" label="{this.data.tabIndex} Click me" click="Alert.show('clicked','info')" tabIndex="{this.data.tabIndex}"
										  tabEnabled="true" tabChildren="true" focusEnabled="true" tabFocusEnabled="true"/>
							</s:GridItemRenderer>
						</fx:Component>
					</s:itemRenderer>    
				</s:GridColumn>
				<s:GridColumn dataField="Album"/>
				<s:GridColumn dataField="Price"/>
			</s:ArrayList>
		</s:columns>       
	</s:DataGrid>
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<s: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"
			   xmlns:components="com.fusioncharts.components.*"
			   minWidth="955" minHeight="600">
	<fx:Style source="create.css"/>
	<fx:Script>
		<![CDATA[
			import spark.events.GridEvent;
			
			private function onGridDoubleClick( e:GridEvent ):void {
				gridSelectionLabel.text = "double-click: " + TweetersList.getItemAt( e.rowIndex )[ e.column.dataField ] as String;
			}
			
			private function onGridClick( e:GridEvent ):void {
				gridSelectionLabel.text = "click: " + TweetersList.getItemAt( e.rowIndex )[ e.column.dataField ] as String;
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:TitleWindow x="10" y="10" width="391" height="463">
		<s:DataGrid   x="71" y="89" width="274" height="210" requestedRowCount="4" gridDoubleClick="onGridDoubleClick( event );" doubleClickEnabled="true" gridClick="onGridClick( event );" alternatingRowColors="[ #eeeeFF, #eeFFee, #FFeeee ]">
			<s:columns>
				<s:ArrayList>
					<s:GridColumn dataField="dataField1" headerText="列 1">
					
					</s:GridColumn>
					<s:GridColumn dataField="dataField2" headerText="列 2">
						<s:itemRenderer>
							<fx:Component>
								<s:DefaultGridItemRenderer  
									fontSize="24"
									color="{data.dataField4}"
									fontWeight="bold"
									textAlign="center"
									fontFamily="Courier New" />
							</fx:Component>
						</s:itemRenderer>
					</s:GridColumn>
					<s:GridColumn  dataField="dataField3" headerText="列 3">
						<s:itemRenderer>
							<fx:Component>
								<s:GridItemRenderer >
									
									<s:HGroup> 
										<s:Image source="{data.dataField3}"/>
										<mx:LinkButton toolTip="清除" label="清除"  textDecoration="underline" color="#2066CF" fontWeight="normal"/>   
										<mx:LinkButton toolTip="确认" label="确认"  textDecoration="underline" color="#2066CF" fontWeight="normal"/>
										
									</s:HGroup>  
									
									
						
								</s:GridItemRenderer>
							</fx:Component>
						</s:itemRenderer>
					</s:GridColumn>
				</s:ArrayList>
			</s:columns>
			<s:typicalItem>
				<fx:Object dataField1="示例数据" dataField2="示例数据" dataField3="示例数据"></fx:Object>
			</s:typicalItem>
			<s:ArrayList id="TweetersList">
				<fx:Object dataField1="数据1" dataField2="数据1" dataField3="03.gif" dataField4="#f906c6"></fx:Object>
				<fx:Object dataField1="数据2" dataField2="数据2" dataField3="03.gif" dataField4="#f9f606"></fx:Object>
				<fx:Object dataField1="数据3" dataField2="数据3" dataField3="04.gif" dataField4="#f9acf6"></fx:Object>
				<fx:Object dataField1="数据4" dataField2="数据4" dataField3="03.gif" dataField4="#f9f6b6"></fx:Object>
			</s:ArrayList>
		</s:DataGrid>
		<s:Label id="gridSelectionLabel" x="71" y="344" width="187" height="31" text="标签"/>
	

	</s:TitleWindow>
</s:Application>