Cookbook4 笔记 第八章 List和项目渲染器

1、创建自定义项目渲染器

 

<s:List id="list" dataProvider="{provider}" selectedIndex="0">
	<s:itemRenderer>
		<fx:Component>
			<s:ItemRenderer>
				<s:states>
					<s:State name="normal"/>
					<s:State name="hovered"/>
					<s:State name="selected"/>
				</s:states>
				<s:Label text="{data}"/>
			</s:ItemRenderer>
		</fx:Component>
	</s:itemRenderer>
</s:List>

 项目呈现器的基本状态为“normal”、“hovered”和“selected”。在 Flex 4.5 中，添加了“down”和“downAndSelected”。

 

 

2、在List中滚动到指定项目

 

spark.components.List.ensureIndexIsVisible(index:int):void

滚动数据项以使其可见的简便处理方法。如果指定索引的数据项未完全显示，List 将滚动，直到数据项显示出来。如果数据项已显示出来，则不会发生任何其他滚动。

 

 

4、更改List的布局

 

（1）使用自定义皮肤

 

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.List")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="normal" />
		<s:State name="selected" />
	</s:states>
	
	<s:Scroller>
		<s:DataGroup id="dataGroup" height="{hostComponent.height}" width="{hostComponent.width}">
			<s:layout>
				<s:TileLayout clipAndEnableScrolling="true"/>
			</s:layout>
		</s:DataGroup>
	</s:Scroller>
</s:Skin>

 （2）上面是cookbook中得例子，也可以直接用layout

 

<s:List width="120" height="80" dataProvider="{provider}" selectedIndex="0"
		itemRenderer="spark.skins.spark.DefaultItemRenderer">
	<s:layout>
		<s:TileLayout clipAndEnableScrolling="true"/>
	</s:layout>
</s:List>

 

7、设置特定的可选项

 

SelectionRestrictedRenderer.mxml

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:mx="library://ns.adobe.com/flex/halo">
	<fx:Script>
		<![CDATA[
			private var __fun:Function;

			public function set selectableFunction(fun:Function):void {
				__fun = fun;
			}

			override public function set data(value:Object):void {
				if (value && __fun(value)) {
					mouseEnabled = true;
					enabled = true;
				} else {
					mouseEnabled = false;
					enabled = false;
				}
				super.data = value;
			}
		]]>
	</fx:Script>
	<s:states>
		<s:State name="normal"/>
		<s:State name="hovered"/>
		<s:State name="selected"/>
	</s:states>
	<s:Label text="{data}"/>
</s:ItemRenderer>

 

 

<?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/halo"
			   creationComplete="init()">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;

			import renderers.SelectionRestrictedRenderer;
			[Bindable]
			public var provider:ArrayCollection;

			public function init():void {
				provider = new ArrayCollection([12, 13, 4, 5, 16, 19, 400]);
			}

			public function customItemRendererFunction(item:*):IFactory {
				var factory:ClassFactory = new ClassFactory(SelectionRestrictedRenderer);
				factory.properties = {"selectableFunction": selectionAllowFunction};
				return factory;
			}

			public function selectionAllowFunction(value:*):Boolean {
				if (value < Number(textInput.text)) {
					return false;
				} else {
					return true;
				}
			}

			public function updateList():void {
				list.executeBindings();
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
	<s:TextInput id="textInput" change="updateList()"/>
	<s:List id="list" dataProvider="{provider}" itemRendererFunction="{customItemRendererFunction}"/>
</s:Application>

 

9、为List添加右键菜单

在ItemRenderer的set data()方法中

var personMenu:ContextMenu = new ContextMenu();
var lookupRecord:ContextMenuItem = new
ContextMenuItem("Look Up Record");
var lookupPicture:ContextMenuItem = new
ContextMenuItem("Look Up Picture");
personMenu.customItems.push(lookupRecord);
personMenu.customItems.push(lookupPicture);
this.contextMenu = personMenu;

 public function ContextMenuItem(caption:String, separatorBefore:Boolean = false, enabled:Boolean = true, visible:Boolean = true)

caption:String — 指定与菜单项关联的文本。有关 caption 值限制，请参阅 ContextMenuItem 类概述。

separatorBefore:Boolean (default = false) — 指定分隔条是否显示在上下文菜单中的菜单项上方。默认值为 false。

enabled:Boolean (default = true) — 指定菜单项在上下文菜单中是处于启用状态还是禁用状态。默认值为 true（启用）。此参数是可选的。

visible:Boolean (default = true) — 指定菜单项是否可见。默认值为 true（可见）。