¿Cómo ordenar una cuadrícula de datos flexible según varias columnas?

Question

Tengo una cuadrícula de datos, completada como se muestra a continuación.Cuando el usuario hace clic en el encabezado de una columna, me gustaría ordenar las filas usando una clasificación lexicográfica en la que la columna seleccionada se usa primero y luego las columnas restantes se usan en orden de izquierda a derecha para romper cualquier empate.¿Cómo puedo codificar esto?

(Tengo una respuesta, que publicaré a continuación, pero tiene un problema: ¡estaré encantado si alguien puede proporcionarme una mejor!)

Aquí está el diseño:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" creationComplete="onCreationComplete()">

    <mx:Script source="GridCode.as" />

    <mx:DataGrid id="theGrid" x="61" y="55" width="466" height="317">
        <mx:columns>
            <mx:DataGridColumn dataField="A"/>
            <mx:DataGridColumn dataField="B"/>
            <mx:DataGridColumn dataField="C"/>
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Y aquí está el código de respaldo:

import mx.collections.ArrayCollection;
import mx.collections.Sort;
import mx.collections.SortField;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.events.DataGridEvent;

public function onCreationComplete():void
{
    var ar:ArrayCollection = new ArrayCollection();
    var ob:Object;
    for( var i:int=0; i<20; i++ )
    {
        ob = new Object();
        ob["A"] = i;
        ob["B"] = i%3;
        ob["C"] = i%5;
        ar.addItem(ob);
    }
    this.theGrid.dataProvider = ar;
}

Answer 1

La mejor respuesta que he encontrado hasta ahora es capturar el evento headerRelease cuando el usuario hace clic:

<mx:DataGrid id="theGrid" x="61" y="55" width="466" height="317"
        headerRelease="onHeaderRelease(event)">

Luego, el controlador de eventos puede aplicar un orden de clasificación a los datos:

private var lastIndex:int = -1;
private var desc:Boolean = false;

public function onHeaderRelease(evt:DataGridEvent):void
{
    evt.preventDefault();

    var srt:Sort = new Sort();
    var fields:Array = new Array();

    if( evt.columnIndex == lastIndex )
    {
        desc = !desc;
    }
    else
    {
        desc = false;
        lastIndex = evt.columnIndex;
    }

    fields.push( new SortField( evt.dataField, false, desc ) );
    if( evt.dataField != "A" )
        fields.push( new SortField("A", false, desc) );
    if( evt.dataField != "B" )
        fields.push( new SortField("B", false, desc) );
    if( evt.dataField != "C" )
        fields.push( new SortField("C", false, desc) );
    srt.fields = fields;

    var ar:ArrayCollection = this.theGrid.dataProvider as ArrayCollection;
    ar.sort = srt;
    ar.refresh();
}

Sin embargo, este enfoque tiene un problema bien conocido, que es que los encabezados de las columnas ya no muestran pequeñas flechas para mostrar la dirección de clasificación.Este es un efecto secundario de llamar a EVT.PreventDefault (), sin embargo, debe hacer esa llamada o de lo contrario su clasificación personalizada no se aplicará.