2 つのリストを使用するフレックス アプリケーションのコンポーネントを作成しています。1 つ目は利用可能なアイテムのリストで、2 つ目は選択されたアイテムのリストです。選択したアイテムを1つ移動させることはできますが、同時に複数を移動できるようにしたいです。ここで私のコンポーネントの動作を確認できます。
以下の複数選択関数では、リストを変更する前に古いインデックスと新しいインデックスをすべて保存しました。ユーザーが上下に移動をクリックしたときに、選択したすべてのアイテムを1つのインデックスで上下に移動できるようにしたい。
private function moveUpOrDown(collection:ArrayCollection, isUp:Boolean,
numPlaces:int=1):void {
var selected:Array = selectedItems.selectedItems;
var index:Array = new Array();
for each (var item:Object in (isUp ? selected.reverse() : selected)) {
var oldIndex:int = selectedData.getItemIndex(item);
var newIndex:int = oldIndex + (isUp ? -1 : 1) * numPlaces;
index.push({'old': oldIndex, 'new': newIndex});
}
for (var i:uint = 0; i < selected.length; i++) {
var dex:Object = index[i];
if ((isUp && dex['new'] > -1) || (!isUp && dex['new'] < collection.length)) {
swapIndicies(collection, dex['old'], dex['new']);
}
}
selectedItems.selectedItems = selected;
reIndexItems();
printItems();
}
これは、単一のアイテムを上下に移動するための完全なアプリケーションです。
<?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/mx"
width="356" height="280" horizontalCenter="0" verticalCenter="0"
backgroundColor="0x000000"
initialize="onInitialize(event)"
viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.utils.StringUtil;
// Visual layout
[Bindable] private var _mainBgColor:uint = 0xDDE0F0;
[Bindable] private var _controlBgColor:uint = 0xEEF0FF;
[Bindable] private var _listWidth:uint = 112;
[Bindable] private var _padding:uint = 12;
[Bindable] private var _imgHight:uint = 32;
// Used as a bindable data provider for each list
[Bindable] private var availableData:ArrayCollection = new ArrayCollection();
[Bindable] private var selectedData:ArrayCollection = new ArrayCollection();
private var items:ArrayCollection = new ArrayCollection([
{ 'label': 'January', 'position': 0 },
{ 'label': 'Feburary', 'position': 1 },
{ 'label': 'March', 'position': 2 },
{ 'label': 'April', 'position': 3 },
{ 'label': 'May', 'position': 4 },
{ 'label': 'June', 'position': 5 },
{ 'label': 'July', 'position': null },
{ 'label': 'August', 'position': null },
{ 'label': 'September', 'position': null },
{ 'label': 'October', 'position': null },
{ 'label': 'November', 'position': null },
{ 'label': 'December', 'position': null }
]);
protected function onInitialize(event:FlexEvent):void {
for each (var item:Object in items) {
if (item.position != null)
selectedData.addItem(item);
else
availableData.addItem(item);
}
}
private function moveRight(event:MouseEvent):void {
moveRightOrLeft(availableItems, availableData, selectedData);
}
private function moveLeft(event:MouseEvent):void {
moveRightOrLeft(selectedItems, selectedData, availableData);
}
private function moveUp(event:MouseEvent):void {
moveUpOrDown(selectedData, true);
}
private function moveDown(event:MouseEvent):void {
moveUpOrDown(selectedData, false);
}
private function moveRightOrLeft(list:List, from:ArrayCollection,
to:ArrayCollection):void {
for each (var obj:Object in list.selectedItems.reverse()) {
to.addItem(obj);
from.removeItemAt(from.getItemIndex(obj));
}
list.selectedItems = [];
reIndexItems();
printItems();
}
private function moveUpOrDown(collection:ArrayCollection, isUp:Boolean,
numPlaces:int=1):void {
var selectedItem:Object = selectedItems.selectedItem;
var oldIndex:int = selectedData.getItemIndex(selectedItem);
var newIndex:int = oldIndex + (isUp ? -1 : 1) * numPlaces;
if ((isUp && newIndex > -1) || (!isUp && newIndex < collection.length)) {
swapIndicies(collection, oldIndex, newIndex);
selectedItems.selectedItem = selectedItem;
}
reIndexItems();
printItems();
}
private function swapIndicies(collection:ArrayCollection, oldIndex:uint,
newIndex:uint):void {
var itemToMove:Object = collection.removeItemAt(oldIndex);
collection.addItemAt(itemToMove, newIndex);
}
private function reIndexItems():void {
var item:Object;
var pos:uint = 0;
for each (item in availableData)
item.position = null;
for each (item in selectedData)
item.position = pos++;
}
private function printItems():void {
trace('############ ITEMS ############');
for each (var item:Object in items) {
trace(StringUtil.substitute('{0}: {1}',
padStr(item.label, ' ', -10), item.position));
}
}
private function padStr(str:String, pad:String, num:int):String {
while (str.length < Math.abs(num))
str = num > 0 ? str + pad : pad + str;
return str;
}
protected function submit(event:MouseEvent):void {
var items:Array = new Array();
for each (var item:Object in selectedData)
items.push(item.label);
var text:String = items.join(',');
Alert.show(text, 'Selected Items');
}
]]>
</fx:Script>
<mx:VBox id="mainBox" width="100%"
backgroundColor="{_mainBgColor}" horizontalCenter="0" verticalCenter="0"
horizontalAlign="center" verticalAlign="middle"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:HBox id="controlBox" width="100%"
backgroundColor="{_controlBgColor}"
paddingTop="{_padding}" paddingBottom="{_padding}"
paddingRight="{_padding}" paddingLeft="{_padding}">
<mx:VBox id="availableBox" width="100%" height="100%">
<mx:Label width="100%" textAlign="center">
<mx:htmlText><![CDATA[<b>Available</b>]]></mx:htmlText>
</mx:Label>
<mx:List id="availableItems" dataProvider="{availableData}"
allowMultipleSelection="true" width="{_listWidth}" rowCount="8"
alternatingItemColors="[0xDDEAFF,0xFFFFFF]" />
<!-- dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" /-->
</mx:VBox>
<mx:VBox id="moveHorizontalBox" verticalAlign="middle" width="100%" height="100%">
<s:Button id="arrowRight" icon="@Embed(source='assets/arrowRight.png')"
width="{_imgHight}" height="{_imgHight}" click="moveRight(event)" />
<s:Button id="arrowLeft" icon="@Embed(source='assets/arrowLeft.png')"
width="{_imgHight}" height="{_imgHight}" click="moveLeft(event)" />
</mx:VBox>
<mx:VBox id="selectedBox" width="100%" height="100%">
<mx:Label width="100%" textAlign="center">
<mx:htmlText><![CDATA[<b>Selected</b>]]></mx:htmlText>
</mx:Label>
<mx:List id="selectedItems" dataProvider="{selectedData}"
allowMultipleSelection="true" width="{_listWidth}" rowCount="8"
alternatingItemColors="[0xDDEAFF,0xFFFFFF]" />
<!-- dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" /-->
</mx:VBox>
<mx:VBox id="moveVerticalBox" verticalAlign="middle" width="100%" height="100%">
<s:Button id="arrowUp" icon="@Embed(source='assets/arrowUp.png')"
width="{_imgHight}" height="{_imgHight}" click="moveUp(event)" />
<s:Button id="arrowDown" icon="@Embed(source='assets/arrowDown.png')"
width="{_imgHight}" height="{_imgHight}" click="moveDown(event)" />
</mx:VBox>
</mx:HBox>
<mx:HBox id="submitBox" width="100%" horizontalAlign="center" verticalAlign="middle"
paddingBottom="{_padding}">
<s:Button label="Submit" click="submit(event)" />
</mx:HBox>
</mx:VBox>
</s:Application>