从UIComponent继承实现ItemRenderer

阅读更多

如果你的列表中要用到过多的ItemRender才能实现您要的效果，那最好不要直接从某容器实现，加载的速度那是相当另人不爽的。因此有必要自己手动来写一个从UIComponent继承而来的组件。参考的文档最好的应该是Adobe开发人员中心的文章了: 理解 Flex itemRenderer

这里写个大概流程代码，以供备忘

package renderer
{
	import mx.controls.AdvancedDataGrid;
	import mx.controls.dataGridClasses.DataGridListData;
	import mx.controls.listClasses.BaseListData;
	import mx.controls.listClasses.IDropInListItemRenderer;
	import mx.controls.listClasses.IListItemRenderer;
	import mx.core.UIComponent;
	import mx.events.FlexEvent;

	public class ExampleItemRenderer extends UIComponent implements IListItemRenderer, IDropInListItemRenderer
	{
		public function ExampleItemRenderer()
		{
			super();
		}
		

		/*
		 * 创建子组件，并设置样式及可见性等
		 */
		override protected function createChildren():void
		{
			//trace("createChildren");
			super.createChildren();
			// 增加子组件
		}

		private var _data:Object;

		[Bindable("dataChange")]
		public function get data():Object
		{
			return _data;
		}

		/*
		 * 在这个方法中调用invalidateProperties()，是为了在适当的时候调用commitProperties()
		 * 进行数据显示设置以及组件的可见性。
		 * 派发事件，并由get data()监听，是为了数据源的绑定。
		 */
		public function set data(value:Object):void
		{
			//trace("setData");
			_data=value;
			invalidateProperties();
			dispatchEvent(new FlexEvent("dataChange"));
		}

		/*
		 * 在这个方法中进行数据设置。当然，也可以在set data()中进行，不过可能会有不妥的时候吧
		 */
		override protected function commitProperties():void
		{
			//trace("commitProperties");
			super.commitProperties();
			// 获取列设置信息
			var field:String = (listData as DataGridListData).dataField;
			// lbl.text = data[field];
		}

		/*
		 * 在这个方法中对子元素进行定位和设置大小，默认大小为0×0
		 */
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			
			//trace("updateDisplayList");
			super.updateDisplayList(unscaledWidth, unscaledHeight);			
			
			//lbl.move(0, 0);
			//lbl.setActualSize(unscaledWidth, unscaledHeight);
		}

		/*
		 * 
		 */
		override protected function measure():void
		{
			//trace("measure");
			super.measure();
			// 如果AdvancedDataGrid的variableRowHeight="true"应该实现该方法，以提供合适的宽高
		}

		private var _listData:BaseListData;

		public function get listData():BaseListData
		{
			return _listData;
		}

		public function set listData(value:BaseListData):void
		{
			_listData=value;
		}

	}
}