Grid Column Header Alignment

Greetings:

I have a grid panel with the following columns defined:

Code:

...
columns:[{
        text: 'Starting Receipts',
        dataIndex: 'startreceipts',        
        renderer: Ext.util.Format.usMoney,
        align: 'right',
        flex: 1
    },{
        text: 'Ending Receipts',
        dataIndex: 'endreceipts',        
        renderer: Ext.util.Format.usMoney,
        align: 'right',
        flex: 1
    },{
        text: 'Billing Percent',
        dataIndex: 'billpcnt',        
        renderer: function(v,m,r){
            return(v + '%');
        },
        align: 'right',
        flex: 1        
    }],
...

The column headers are not aligning properly to the right with the data:

sshot.png

I am guessing that it has something to do with the columns wanting to align before numeric formatting occurs. Any suggestions? Thanks!



Grid Column Header Alignment