Flex 4:更改s:List中的元素位置

时间:2011-12-20 16:37:14

标签: flex list actionscript adobe

我在我的flex应用程序中有一个附加到ArrayCollection(元素)的列表。 我想改变一个元素的位置,所以实际上我正在改变它的项目索引,问题是,如何做这种动作?

以下是一个更好的例子:

第1项i:1 第2项i:2 第3项i:3 第4项i:4

i =指数

在项目内部有一个名为“Up”的按钮,当我在项目3上抓住它时,它变得像这样:

第1项i:1 第3项i:2 第2项i:3 第4项i:4

正如我们所看到的,我们为项目3 ...

提供了一个新索引

如何在动作脚本中实现此功能,并在界面中看到该项目已移动。

Thx!

3 个答案:

答案 0 :(得分:2)

在上面的答案中,通过将list的selectedItem设置为Selected Obj而不是将List的selectedIndex设置为newPos,我们不需要显式更改或维护ArrayCollection中的任何选择。

public function moveUp(event:MouseEvent):void             {                 var index:Number = myList.selectedIndex;

            if (index > 0) {                
                var obj:Object = elements.getItemAt(index);
                var newPos:Number = index - 1;

                elements.removeItemAt(index);
                elements.addItemAt(obj, newPos);

                myList.selectItem = obj; (instead of myList.selectedIndex = newPos;)
            }
        }

答案 1 :(得分:1)

当您看到ArrayCollection被附加时,您应该做的第一件事就是DOCUMENTATION

您会看到它有addItemAtremoveItemAt

等方法

所以显而易见的事情是:

private function moveUp(collection:ArrayCollection, indexToMove:int, numPlaces:int=1) {
    var newIndex:int = indexToMove - numPlaces;
    if(newIndex < 0) {
        newIndex = 0;
    }
    var itemToMove:Object = collection.removeItemAt(indexToMove);
    collection.addItemAt(itemToMove, newIndex);
}

答案 2 :(得分:1)

如果你的ArrayCollection绑定到你的列表,我会像这样直接改变arrayCollection:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable]
            public var elements:ArrayCollection = new ArrayCollection([
                {label : "item 1"},
                {label : "item 2"}, 
                {label : "item 3"}, 
                {label : "item 4"} 
            ]);

            public function moveUp(event:MouseEvent):void
            {
                var index:Number = myList.selectedIndex;

                if (index > 0) {                
                    var obj:Object = elements.getItemAt(index);
                    var newPos:Number = index - 1;

                    elements.removeItemAt(index);
                    elements.addItemAt(obj, newPos);

                    myList.selectedIndex = newPos;
                }
            }


            public function moveDown(event:MouseEvent):void
            {
                var index:Number = myList.selectedIndex;

                if (index < elements.length - 1) {
                    var obj:Object = elements.getItemAt(index);
                    var newPos:Number = index + 1;

                    elements.removeItemAt(index);
                    elements.addItemAt(obj, newPos);

                    myList.selectedIndex = newPos;
                }
            }

        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:List id="myList" labelField="label" dataProvider="{elements}"/>

    <s:HGroup>
        <s:Button label="Move up" click="moveUp(event)"/>
        <s:Button label="Move down" click="moveDown(event)"/>
    </s:HGroup>

</s:WindowedApplication>

现在,您可以使用对父函数的调用或自定义事件从自定义列表项呈示器中应用相同的逻辑。祝你好运!