Disable panel horizontal scroll when text is entered in textfield - extjs

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()
});