flex4 List等列表控件自定义项目呈示器组件研究_悄悄俏俏

在使用List时，通过下面的方法可实现用自定义组件显示内容：

private function myItemRendererFunction(item:Object):IFactory {
			var factory:ClassFactory = new ClassFactory(CheckBox);
			factory.properties = {label : item.rolename};
			return factory;
		}

然后将list的itemRendererFunction指向这个方法，就可以实现用复选框来展示List内容的功能了。

有些时候某些列表组件不带itemRendererFunction属性，譬如DataGrid。只带itemRenderer，那么就需要自定义的项目呈示器来完成了。

通过查找API，发现IListItemRenderer这个接口，为大部分列表自定义项目呈示器的接口，那么就继承这个接口来写一个自定义项目呈示器了。

	import com.wynlink.event.UserAuthManageEvent;
	import com.wynlink.utils.CommonalityVar;
	
	import flash.events.MouseEvent;
	
	import mx.controls.Alert;
	import mx.controls.listClasses.IListItemRenderer;
	import mx.core.UIComponent;
	import mx.events.CloseEvent;
	
	import spark.components.BorderContainer;
	import spark.components.Button;
	import spark.components.SkinnableContainer;
	import spark.layouts.HorizontalLayout;
	
	public class ListItemButton extends SkinnableContainer implements IListItemRenderer {
		// 要展现的自定义呈示器，二个按钮
		private var changeButton:Button=new Button();
		private var delButton:Button=new Button();
		private var option:Object;
		
		public function ListItemButton(){
			super();
			var layout:HorizontalLayout=new HorizontalLayout();
			this.layout=layout;
			changeButton.label="修改";
			delButton.label="删除";
			this.addElement(changeButton)
			this.addElement(delButton);
		}
		
		public function get data():Object{
			return null;
		}
		
		// 外部通过设置这个data来达到更新项目呈示器的功能
		public function set data(value:Object):void{
			this.option=value;
		}
		
	}

然后外部

var dataGridColumn5:DataGridColumn = new DataGridColumn();
dataGridColumn5.headerText = "操作";
dataGridColumn5.headerWordWrap = true;
var ifactory:ClassFactory=new ClassFactory(ListItemButton);
dataGridColumn5.itemRenderer=ifactory;

这样就可实现了。

还有一个需要注意的地方，在更改列表的dataProvider时，因为是自定义呈示器，所以如果想要获取自定义呈示器并对它进行修改，那么必须等到列表完成呈示器添加后才能进行。参考代码如下：

/**
 * 设置选中的角色和菜单
 */
public function setSelectRole(roleMenus:Array):void {
	// 更新传入的角色集合，以便监听事件的方法里进行更新
	this.userRoleMenus = roleMenus;
	if(!this.roleList.hasEventListener(RendererExistenceEvent.RENDERER_ADD)) {
		this.roleList.addEventListener(RendererExistenceEvent.RENDERER_ADD, function(e:RendererExistenceEvent):void {
			// 首先判断项目呈示器的这二个数目是否相等，相等时才表示项目呈示器初始化完成并放入了指定数目的自定义组件
			// 先有的numElements，然后numChildren再从0慢慢增加到和numElements一样的数目
			if(roleList.dataGroup.numChildren != roleList.dataGroup.numElements) {
				return;
			}
			
			for(var i:int = 0; i < roleList.dataProvider.length; i++) {
				for(var j:int = 0; j < userRoleMenus.length; j++) {
					var obj:Object = userRoleMenus[j];
					
					if(obj.rolename == roleList.dataProvider.getItemAt(i).rolename) {
						// 这里取出指定位置的复选框
						var check:CheckBox = roleList.dataGroup.getElementAt(i) as CheckBox;
						check.selected = true;
						addMenu(check);
					}
				}
			}
		});
	}
}

这样，对于列表组件的自定义项目呈示器的一系列常规操作就都能实现了