DataGrid column position changes after doing sort

[bidur]

I am trying to sort datagrid's data. The sequence of operations goes as follows:
1.Get the httpService data and assign it to ArrayCollection.
myDPColl = myHTTPService.lastResult;
2.Assign dataProvider to the dataGrid.
myGrid.dataProvider=myDPColl;
3.user can change the colums order.For example. If the original column order is Name, Address and Phone, Then user can change to Phone, Name,Address and so on
4.Sorting is done in the myDPColl
5.Assign newly sorted dataProvider to the dataGrid.
myGrid.dataProvider=myDPColl;

The problem in my case is that at step 5 it does not retains the column order that the user has set at step 3 in the sorted Datagrid


<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.events.DataGridEvent;
import mx.collections.*;
import mx.utils.ObjectUtil;

public var myDPColl:ArrayCollection;

[Bindable]
private var sortA:Sort;

private var sortBy0:SortField;
private var sortBy1:SortField;
private var sortBy2:SortField;
private var columns:Array;
private var col:DataGridColumn;


private function onServiceResult( e:ResultEvent ) :void
{
myDPColl = myHTTPService.lastResult;
}

private function sortDataGrid():void {

sortA = new Sort();

columns=myGrid.columns;

col=columns[0];
sortBy0 = new SortField(col.headerText, true);
col=columns[1];
sortBy1 = new SortField(col.headerText, true);
col=columns[2];
sortBy2 = new SortField(col.headerText, true);
sortA.fields=[sortBy0, sortBy1,sortBy2];


myDPColl.sort=sortA;

myDPColl.refresh();

myGrid.dataProvider=myDPColl;
myGrid.rowCount=myDPColl.length +1;

}

]]>
</mx:Script>


<mx:DataGrid id="myGrid" dataProvider="{myDPColl}"/>
<mx:Button label="sort" click="sortDataGrid()"/>




Thanks