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 = newContextMenuItem("Look Up Record");var lookupPicture:ContextMenuItem = newContextMenuItem("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（可见）。