flex 巧用dataGrid实现 复杂格式 数据 显示

	<mx:DataGrid id="dg" width="{marketMoversPM.PANEL_WIDTH}" wordWrap="true" rowHeight="30"
				 styleName="MarketMoversDataGrid" variableRowHeight="true" height="100%" headerHeight="40"
				 draggableColumns="false" resizableColumns="false" >
		<mx:columns>
			<mx:DataGridColumn id="column_1" width="{SMALL_COLUMN_WIDTH}" 
							   headerText="No."  dataField="runnerNumber" >
				<mx:itemRenderer>
					<fx:Component>
						<mx:Box	width="30" verticalAlign="middle" verticalScrollPolicy="off" horizontalScrollPolicy="off" >
							<mx:Label text="{data.runnerNumber}" width="100%"  textAlign="center" />
						</mx:Box>
					</fx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
			
			<mx:DataGridColumn id="column_2" width="{LARGE_COLUMN_WIDTH}" 
							   headerText="Runner" dataField="runnerName" >
				<mx:itemRenderer>
					<fx:Component>
						<mx:Box	width="160"  verticalAlign="middle" verticalScrollPolicy="off" horizontalScrollPolicy="off" >
							<mx:Label text="{data.runnerName}" width="100%"  textAlign="left" />
						</mx:Box>
					</fx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
			
			<mx:DataGridColumn id="column_3" width="{MEDIUM_COLUMN_WIDTH_3}"
							   headerText="Odds at 15m to AST" dataField="openingOdds" >
				<mx:itemRenderer>
					<fx:Component>
						<mx:Box	width="100" verticalAlign="middle" verticalScrollPolicy="off" horizontalScrollPolicy="off" >
							<mx:Label text="{(data.oddsValueAtAST != 0) ? data.oddsValueAtAST : ''}" width="100%" textAlign="center" />
							<!--<mx:Label text="{data.openingOdds ? data.openingOdds : ''}" width="100%" textAlign="center" />-->
						</mx:Box>
					</fx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
			
			<mx:DataGridColumn id="column_4" width="{MEDIUM_COLUMN_WIDTH_2}" textAlign="center"
							   sortable="false"
							   headerText="Min | Max"  > 
				<mx:itemRenderer>
					<fx:Component>
						<mx:Box	width="160" verticalAlign="middle" verticalScrollPolicy="off" horizontalScrollPolicy="off" >
							<mx:Label text="{(data.minOdd == 0) ? '' : data.minOdd} | {(data.maxOdd == 0) ? '' : data.maxOdd}" width="100%"  textAlign="center" />
						</mx:Box>
					</fx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
			
			<mx:DataGridColumn id="column_5" width="{MEDIUM_COLUMN_WIDTH}" textAlign="center"
							   sortable="false"
							   headerText="{col_5_oddsTime1}"  > 
				<mx:itemRenderer>
					<fx:Component>
						<mx:Box	width="70" verticalAlign="middle" verticalScrollPolicy="off" horizontalScrollPolicy="off" >
							<mx:Label text="{(data.odds.getItemAt(0).odds == 0) ? '' : data.odds.getItemAt(0).odds}" width="100%" textAlign="center" />
						</mx:Box>
					</fx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
			
			<mx:DataGridColumn id="column_6" width="{MEDIUM_COLUMN_WIDTH}" textAlign="center"
							   sortable="false"
							   headerText="{col_6_oddsTime2}"  >
				<mx:itemRenderer>
					<fx:Component>
						<mx:Box	width="70" verticalAlign="middle" verticalScrollPolicy="off" horizontalScrollPolicy="off" >
							<mx:Label text="{(data.odds.getItemAt(1).odds == 0) ? '' : data.odds.getItemAt(0).odds}" width="100%" textAlign="center" />
						</mx:Box>
					</fx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
			
			<mx:DataGridColumn id="column_7" width="{MEDIUM_COLUMN_WIDTH}" textAlign="center"
							   sortable="false"
							   headerText="{col_7_oddsTime3}" >
				<mx:itemRenderer>
					<fx:Component>
						<mx:Box	width="70" verticalAlign="middle" verticalScrollPolicy="off" horizontalScrollPolicy="off" >
							<mx:Label text="{(data.odds.getItemAt(2).odds == 0) ? '' : data.odds.getItemAt(0).odds}" width="100%" textAlign="center" />
						</mx:Box>
					</fx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
			
			<mx:DataGridColumn id="column_8" width="{LARGE_COLUMN_WIDTH_2}"
							   headerText="%Change from 15m to AST" >
				<mx:itemRenderer>
					<fx:Component>
						<presentation:MovementIconIRv2 width="100%" textAlign="center" />
						<!--<marketMovers:MovementIconIR width="185" textAlign="center" /> -->
					</fx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
			
		</mx:columns>
	</mx:DataGrid>