In Ext JS 4.1.1 there is a strange behavior. Look at the small example below.
When I open the window, I scroll the grid to the right.
Now I change the width of the Email-Column and make it a little smaller.
This causes the ColumnHeader shift tu the left, so ColumnHeader and Columns are shifted mutually.
I think this is a bug in 4.1.1, in 4.1.0 it looks good.

Code:
Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224" },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});


var panel = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name', width: 200},
        { header: 'Email', dataIndex: 'email', width: 100},
        { header: 'Phone', dataIndex: 'phone', width: 200}
    ],
    height: 200,
    width: 400
});
var win = Ext.create('Ext.window.Window', {
		title: 'Title',
		items: panel
}); 
win.show();