Tab Key in header items of grid do move the content of grid

Currently I am using filtering by adding textfields in the headers of gridpanel. In grid scrollbar shows if columns do not fit in the width of grid. we can then move scrollbar using mouse to see the hidden columns, but what if I want to see the columns by using tab key selection. Here I am facing this issue. When I click on any textfield item in the header and then move to next item using tab key then it goes correctly till the columns showing in front of us, but when i click on tab key again then it moves to next item that was hidden , on pressing tab key that column header moves to left and it shows up, but column content is fixed to its earlier position. Due to this the alignment of header and data of grid not matching. I want its content to be moved to left with the header so that it will be aligned properly in each line.

Code:

Ext.application({
    name: 'Fiddle',


    launch: function() {
        
        
        Ext.define('Ext.override.form.field.Number', {
            override: 'Ext.form.field.Number',
            spinUpEnabled: false,
            spinDownEnabled: false
        });


        Ext.define('Ext.override.grid.plugin.CellEditing', {
            override: 'Ext.grid.plugin.CellEditing',
            onSpecialKey: function(ed, field, e) {
                if (e.getKey() == 38 || e.getKey() == 40) {
                    var me = this,
                        ctx = me.context,
                        factor = (e.getKey() == 38 ? -1 : 1),
                        newRow = ctx.rowIdx + (1 * factor),
                        max = ed.grid.getStore().count();
                    if (newRow >= 0 && newRow < max) {
                        me.startEditByPosition({
                            column: ctx.colIdx,
                            row: newRow
                        });
                    }
                }
                this.callParent(arguments);
            }
        });
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'age'],
            data: {
                'items': [{
                    "name": "Lisa",
                    "email": "lisa@simpsons.com",
                    "age": 8
                }, {
                    "name": "Bart",
                    "email": "bart@simpsons.com",
                    "age": 10
                }, {
                    "name": "Homer",
                    "email": "home@simpsons.com",
                    "age": 36
                }, {
                    "name": "Marge",
                    "email": "marge@simpsons.com",
                    "age": 34
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });


        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            id: 'gridpanel1',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columnLines: true,
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                editor: {
                    xtype: 'textfield',
                    selectOnFocus: true
                },
                items: [{
                    xtype: 'textfield',
                    id: 'nameClientFilter',
                    flex: 1,
                    margin: 2,
                    enableKeyEvents: true,
                    listeners: {
                        element: 'el',
                        mousedown: function (e) { e.stopPropagation(); },
                        keyup: function (e) { e.stopPropagation();  }
                    }
                }]
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false,
                    selectOnFocus: true
                },
                items: [{
                    xtype: 'textfield',
                    id: 'emailClientFilter',
                    flex: 1,
                    margin: 2,
                    enableKeyEvents: true,
                    listeners: {
                        element: 'el',
                        mousedown: function (e) { e.stopPropagation(); },
                        keyup: function (e) { e.stopPropagation();  }
                    }
                }]
            }, {
                header: 'Age',
                dataIndex: 'age',
                editor: {
                    xtype: 'numberfield',
                    hideTrigger: true,
                    selectOnFocus: true
                },
                items: [{
                    xtype: 'textfield',
                    id: 'ageClientFilter',
                    flex: 1,
                    margin: 2,
                    enableKeyEvents: true,
                    listeners: {
                        element: 'el',
                        mousedown: function (e) { e.stopPropagation(); },
                        keyup: function (e) { e.stopPropagation();  }
                    }
                }]
            }, {
                header: 'Name',
                dataIndex: 'name',
                editor: {
                    xtype: 'textfield',
                    selectOnFocus: true
                },
                items: [{
                    xtype: 'textfield',
                    id: '1nameClientFilter',
                    flex: 1,
                    margin: 2,
                    enableKeyEvents: true,
                    listeners: {
                        element: 'el',
                        mousedown: function (e) { e.stopPropagation(); },
                        keyup: function (e) { e.stopPropagation();  }
                    }
                }]
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false,
                    selectOnFocus: true
                },
                items: [{
                    xtype: 'textfield',
                    id: '1emailClientFilter',
                    flex: 1,
                    margin: 2,
                    enableKeyEvents: true,
                    listeners: {
                        element: 'el',
                        mousedown: function (e) { e.stopPropagation(); },
                        keyup: function (e) { e.stopPropagation();  }
                    }
                }]
            }, {
                header: 'Age',
                dataIndex: 'age',
                editor: {
                    xtype: 'numberfield',
                    hideTrigger: true,
                    selectOnFocus: true
                },
                items: [{
                    xtype: 'textfield',
                    id: '1ageClientFilter',
                    flex: 1,
                    margin: 2,
                    enableKeyEvents: true,
                    listeners: {
                        element: 'el',
                        mousedown: function (e) { e.stopPropagation(); },
                        keyup: function (e) { e.stopPropagation();  }
                    }
                }]
            }, {
                header: 'Name',
                dataIndex: 'name',
                editor: {
                    xtype: 'textfield',
                    selectOnFocus: true
                },
                items: [{
                    xtype: 'textfield',
                    id: '2nameClientFilter',
                    flex: 1,
                    margin: 2,
                    enableKeyEvents: true,
                    listeners: {
                        element: 'el',
                        mousedown: function (e) { e.stopPropagation(); },
                        keyup: function (e) { e.stopPropagation();  }
                    }
                }]
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false,
                    selectOnFocus: true
                },
                items: [{
                    xtype: 'textfield',
                    id: '2emailClientFilter',
                    flex: 1,
                    margin: 2,
                    enableKeyEvents: true,
                    listeners: {
                        element: 'el',
                        mousedown: function (e) { e.stopPropagation(); },
                        keyup: function (e) { e.stopPropagation();  }
                    }
                }]
            }, {
                header: 'Age',
                dataIndex: 'age',
                editor: {
                    xtype: 'numberfield',
                    hideTrigger: true,
                    selectOnFocus: true
                },
                items: [{
                    xtype: 'textfield',
                    id: '2ageClientFilter',
                    flex: 1,
                    margin: 2,
                    enableKeyEvents: true,
                    listeners: {
                        element: 'el',
                        mousedown: function (e) { e.stopPropagation(); },
                        keyup: function (e) { e.stopPropagation();  }
                    }
                }]
            }],
            selType: 'cellmodel',
            plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1,
                listeners: {
                    keydown: function() {
                        console.log(arguments);
                    }
                }
            })],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
    
});

Tab Key in header items of grid do move the content of grid