5.10.跟踪TileList中所有被选中的子节点

5.10.1.问题
为TileList 的渲染器设置一个切换,并跟踪TileList 中所有被选中的子节点
5.10.2.解决方法
扩展TileList 组件并创建一个类似itemRenderer 用法的定制渲染器,对于渲染器中的切换事件,在事件中发布唯一的标识符uid 到TileList 并保存所有IDs 到一个数组。
5.10.3.讨论
对于所有itemRenderers,当它们的listData 属性被设置了,可以访问它们的父级ListBase组件。当一个渲染器实现IDropInListItemRenderer,它的实现方法get 和set listData,一个BaseListData 对象。

BaseListData 类通过owner 属性设置itemRenderer 中的数据提供对ListBase 对象的访问。如下所示:
+展开
-ActionScript
public function set listData( value:BaseListData ):void {
private var listParent:ListBase;
listParent = _listData.owner as ListBase;
}

在引入ListBase 创建一个渲染器以后,所有ListBase 中的public 属性在渲染器中都是可 访问的,下面实例做了一个所有切换按钮相对itemRenderer 都可用的ArrayCollection,在 本例中是SelectedChildrenTileListRender 类。SelectedChildrenTileListRender 类浏览ArrayCollection 并从依赖于其按钮开关状态的数组添加或删除它自身。

SelectedChildrenTileListRender 使用由BaseListData 传入的uid 属性, 来判断itemRenderer 是否被描述到渲染器的数组。这个uid,或者说唯一标识符,即使数据有复制条目,也可以确保itemRenderer 将会像标识符本身一样被唯一引用。

SelectedChildrenTileListRender 定义的条目渲染器将被这样使用:

+展开
-XML
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxmlimplements="mx.controls.listClasses.IDropInListItemRenderer">
<mx:Script>
<![CDATA[
import mx.controls.listClasses.BaseListData;
import mx.controls.Button;
import mx.controls.TileList;
import mx.events.FlexEvent;
import mx.controls.listClasses.IDropInListItemRenderer;
private var _listData:BaseListData;
[Bindable]
public var key:String;
//the list parent of this renderer
private var tileList:SelectedChildrenTileList;
override public function set data(value:Object):void {
super.data = value;
this.invalidateProperties();
dispatchEvent(newFlexEvent(FlexEvent.DATA_CHANGE));
}
[Bindable("dataChange")]
public function get listData():BaseListData {return _listData; }
public function set listData( value:BaseListData ):void {
//set the list data
_listData = value;
//get access to the tile list
tileList = _listData.owner as SelectedChildrenTileList;
//finally, track this item's unique ID that all items
//in a BaseListData are assigned
key=_listData.uid;
}
private function onToggle(event:Event):void {
var i:int = tileList.toggledButtons.getItemIndex(key);
//if the key of this renderer appears in the list of toggled buttons,then remove it
if (i != -1 && (event.target as Button).selected==false ){
tileList.toggledButtons.removeItemAt(i);
}
//if the key of this renderer doesn't appear in the list of toggled buttons, then add it
if (i == -1 && (event.target as Button).selected == true ) {
tileList.toggledButtons.addItem(key)
}
tileList.invalidateList();
}
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth,unscaledHeight);
if(key){
var i:int= tileList.toggledButtons.getItemIndex(key);
//sometimes putting your if/else on one line makes things neater,not always, but sometimes
if (i != -1){ toggleBtn.selected=true ;
else { toggleBtn.selected = false ; }
}
}

]]>
</mx:Script>
<mx:Button id="toggleBtnwidth="100%label="{data.label}"
toggle="truechange="onToggle(event)"/>

</mx:VBox>

下面代码显示的SelectedChildrenTileList 使用SelectedChildrenTileListRender,继承自TileList,并且像前面提到的,定义一个toggledButton 的ArrayCollection 来存储所有选中的条目的uid。你同样必须定义一个returnAllSelected 方法来寻找所有当前选中的itemRenderers
+展开
-XML
<mx:TileList xmlns:mx="http://www.adobe.com/2006/mxmlinitialize="toggledButtons = new
ArrayCollection()
">

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var toggledButtons:ArrayCollection;
public function removeAll():void {
toggledButtons.removeAll();
//use the invalidatList method to redraw the grid right away
this.invalidateList();
}
public function returnAllSelected():Array{
var arr:Array = new Array();
for (var i:int = 0; i < (dataProvider as ArrayCollection).length; i++) {
if (toggledButtons.contains((indexToItemRenderer(i) as SelectedChildrenTileListRender).key)) {
arr.push((indexToItemRenderer(i) as SelectedChildrenTileListRender).data);
}
}
return arr;
}

]]>
</mx:Script>
</mx:TileList>

加支付宝好友偷能量挖...


评论(0)网络
阅读(149)喜欢(0)flash/flex/fcs/AIR