Find out deselected item in spark list with multiple selection

In a spark list I could use the change event to find out which item has been selected or deselected. The dispatched IndexChangeEvent object has the properties newIndex and oldIndex holding this information.

But with multiple selection allowed this doesn't work anymore because newIndex and oldIndex could refer to indices of still selected elements.

A solution would be to copy the selectedIndices vector to another variable and compare this variable with selectedIndices after a change in selection, but this seems to be somewhat complex.

Does an开发者_如何学编程yone know if there is an easy way two get the index/item a user is deselecting while other elements are still selected?

You will need to store the selectedIndicies and compare the difference.

private static function findMissing(ar1:Array, ar2:Array):Array
{
    var missing:Array = [];
    for each(var item:Object in ar1)
    {
        if(ar2.indexOf(item) < 0)
            missing.push(item);
    }

    return missing;
}

You could also extend your custom data object with

• a bindable boolean property: _selected, which gets updated via the list interactions.
• and an event that can be fired from it: selectionChanged.
  

In the selected setter - if it actually changed - you can fire your own bubbling selectionChanged event, and capture it wherever you need.

SelectableItem.as - the custom data structure representing a row data of the list

[Bindable]
[Event(name="selectionChanged",type="flash.events.Event")]
public class SelectableItem
{
    public static const EVENT_SELECTION_CHANGED:String = 'selectionChanged';
    private var _selected:Boolean;
    private var _name:String;

    public function SelectableItem()
    {
    }

    public function get selected():Boolean
    {
        return _selected;
    }

    public function set selected(value:Boolean):void
    {
        if (_selected != value)
        {
            _selected = value;
            dispatchEvent(new Event(EVENT_SELECTION_CHANGED, true));
        }
    }

    public function get name():String
    {
        return _name;
    }

    public function set name(value:String):void
    {
        _name = value;
    }
}

MyDataGrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    allowMultipleSelection="true">
    <fx:Script>
        <![CDATA[
            import mx.controls.listClasses.IListItemRenderer;

            protected override function updateRendererDisplayList(r:IListItemRenderer):void
            {
                super.updateRendererDisplayList(r);
                if (r && r.data)
                    r.data.selected = DataGrid(r.owner).isItemSelected(r.data);
            }

        ]]>
    </fx:Script>
</mx:DataGrid>

TestApplication.mxml

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

        [Bindable]
        private var list:ArrayCollection = new ArrayCollection();

        protected function onCreationComplete(event:FlexEvent):void
        {
            for (var i:int = 0; i < 20; i++)
            {
                var item:SelectableItem= new SelectableItem();
                item.name = 'Item ' + i;
                item.addEventListener(SelectableItem.EVENT_SELECTION_CHANGED, onItemSelectionChanged);
                list.addItem(item);
            }
        }

        private function onItemSelectionChanged(event:Event):void
        {
            trace(event);
        }

    ]]>
</fx:Script>
<my:MyDataGrid dataProvider="{list}" width="100%" height="100%" />

I hope this helps.