Flex的一点入门经验(5)--flex的DataGrid中自定义显示项目

有如下一个简单的VO,有两个属性name和capacity.

public class Volume
	{
		public function Volume(name:String,capacity:int)
		{
			this.name=name;
			this.capacity=capacity;
		}

		private var _name:String;

		private var _capacity:int;

	}

现在想在DataGrid中显示capacity的时候,后面加上"GB".那么有如下三种方法
1 在Volume中加一个get方法(感觉破坏了vo的纯洁性,不推荐)
public function get capacityInGB():String{
return _capacity+"GB";
}
然后dataField中引用这个属性.

	<s:DataGrid width="100%" dataProvider="{volumes}">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="name"/>
				<s:GridColumn dataField="capacityInGB"/>
			</s:ArrayList>
		</s:columns>
	</s:DataGrid>

2 自定义itemRenderer

	<s:DataGrid width="100%" dataProvider="{volumes}">
			<s:columns>
				<s:ArrayList>
					<s:GridColumn dataField="name"/>
					<s:GridColumn dataField="capacity">
						<s:itemRenderer>
							<fx:Component>
								<s:GridItemRenderer>
									<s:Label text="{data.capacity}GB">
									</s:Label>
								</s:GridItemRenderer>	
							</fx:Component>
						</s:itemRenderer>
					</s:GridColumn>
				</s:ArrayList>
			</s:columns>
		</s:DataGrid>

3 用labelFunction

	<s:DataGrid width="100%" dataProvider="{volumes}">
			<s:columns>
				<s:ArrayList>
					<s:GridColumn dataField="name"/>
					<s:GridColumn labelFunction="capacityLabelFunction"/>
				</s:ArrayList>
			</s:columns>
		</s:DataGrid>

capacityLabelFunction方法如下

		private function capacityLabelFunction(data:Volume,grid:GridColumn):String{
				return data.capacity+"GB";
		}

[img]http://dl.iteye.com/upload/picture/pic/125260/7984213a-4aa5-39f3-9533-c168ff04dbde.jpg[/img]
第二个是用了自定义itemrender的,看来还要调一下label的位置