Disable panel horizontal scroll when text is entered in textfield

Question

I want to disable horizontal scroll of panel when someone enter text in text field.

First problem:
Currently problem is when you enter text in any textfield and press right arrow key from keyboard (keyCode = 39) then panel horizontal also move in right direction. I want to diable that when text is entered in textfield.

second Problem
Horizontal scroll moves with key only when click on that panel.
Fiddle : https://fiddle.sencha.com/#view/editor&fiddle/1mjd

    Ext.create('Ext.panel.Panel', {
    scrollable: 'horizontal',
    region: 'center',
    layout: 'hbox',
    baseCls: '',
    containerScroll: true,
    items: [{
        xtype: 'panel',
        items: [{
            xtype: 'textfield'
        }],
        width: 300,
        height: 400,
        margin: '0 0 0 9'
    }, {
        xtype: 'panel',

        items: [{
            xtype: 'textfield'
        }],
        width: 300,
        height: 400,
        margin: '0 0 0 9'
    }, {
        xtype: 'panel',
        items: [{
            xtype: 'textfield'
        }],
        width: 300,
        height: 400,
        margin: '0 0 0 9'
    }, {
        xtype: 'panel',
        items: [{
            xtype: 'textfield'
        }],
        width: 300,
        height: 400,
        margin: '0 0 0 9'
    }, {
        xtype: 'panel',
        items: [{
            xtype: 'textfield'
        }],
        width: 300,
        height: 400,
        margin: '0 0 0 9'
    }, {
        xtype: 'panel',
        items: [{
            xtype: 'textfield'
        }],
        width: 300,
        height: 400,
        margin: '0 0 0 9'
    }, {
        xtype: 'panel',
        items: [{
            xtype: 'textfield'
        }],
        width: 300,
        height: 400,
        margin: '0 0 0 9'
    }],
    renderTo: Ext.getBody()
});