Column header alignment completly broken when changing column order under hori-scroll

If you scroll to the right, then take the last column to move it to the previous last, the entire layout is completely mixed-up.

Code:

var grid = new Ext.grid.Panel({    title: 'Substation power monitor',
    width: 1400,
    columns: [{
        text: 'Id',
        dataIndex: 'id',
        width: 520
    }, {
        text: 'Rating',
        dataIndex: 'maxCapacity',
        width: 500
    }, {
        text: 'Avg.',
        dataIndex: 'avg',
        width: 505,
        formatter: 'number("0.00")'
    }, {
        text: 'Max',
        dataIndex: 'max',
        width: 80
    }, {
        text: 'Instant',
        dataIndex: 'instant',
        width: 80
    }, {
        text: '%Capacity',
        width: 150,


        // This is our Widget column
        xtype: 'widgetcolumn',
        dataIndex: 'capacityUsed',


        // This is the widget definition for each cell.
        // Its "value" setting is taken from the column's dataIndex
        widget: {
        xtype: 'progressbarwidget',
            textTpl: [
                '{percent:number("0")}% capacity'
            ]
        }
    }],
    renderTo: document.body,
    disableSelection: false,
    store: {
       fields: [{
           name: 'id',
           type: 'string'
       }, {
           name: 'maxCapacity',
           type: 'int'
       }, {
           name: 'avg',
           type: 'int',
           calculate: function(data) {
               // Make this depend upon the instant field being set which sets the sampleCount and total.
               // Use subscript format to access the other psuedo fields which are set by the instant field's converter
               return data.instant && data['total'] / data['sampleCount'];
           }
       }, {
           name: 'max',
           type: 'int',
           calculate: function(data) {
               // This will be seen to depend on the "instant" field.
               // Use subscript format to access this field's current value to avoid circular dependency error.
               return (data['max'] || 0) < data.instant ? data.instant : data['max'];
           }
       }, {
           name: 'instant',
           type: 'int',


           // Upon every update of instananeous power throughput,
           // update the sample count and total so that the max field can calculate itself
           convert: function(value, rec) {
               rec.data.sampleCount = (rec.data.sampleCount || 0) + 1;
               rec.data.total = (rec.data.total || 0) + value;
               return value;
           },
          depends: []
       }, {
           name: 'capacityUsed',
           calculate: function(data) {
               return data.instant / data.maxCapacity;
           }
       }],
       data: [{
           id: 'Substation A',
           maxCapacity: 1000,
           avg: 770,
           max: 950,
           instant: 685
       }, {
           id: 'Substation B',
           maxCapacity: 1000,
           avg: 819,
           max: 992,
           instant: 749
       }, {
           id: 'Substation C',
           maxCapacity: 1000,
           avg: 588,
             max: 936,
           instant: 833
       }, {
           id: 'Substation D',
           maxCapacity: 1000,
           avg: 639,
           max: 917,
           instant: 825
       }]
   }
});


// Fake data updating...
// Change one record per second to a random power value
Ext.interval(function() {
    var recIdx = Ext.Number.randomInt(0, 3),
        newPowerReading = Ext.Number.randomInt(500, 1000);


    grid.store.getAt(recIdx).set('instant', newPowerReading);
}, 10000);

Column header alignment completly broken when changing column order under hori-scroll