Ext js 6 : datefield in scrollable container is not working - extjs

Question

datefield in scrollable container is not rendering its picker properly. Here is the fiddle.
https://fiddle.sencha.com/#fiddle/17l8
Ext.application({
launch : function() {
Ext.create('Ext.container.Container', {
layout:'anchor',
scrollable:true,
width: 400,
height:'100px',
renderTo: Ext.getBody(),
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
defaults: {
labelWidth: 80,
// implicitly create Container by specifying xtype
xtype: 'datefield',
flex: 1,
style: {
padding: '10px'
}
},
items: [{
xtype: 'datefield',
name: 'startDate',
fieldLabel: 'DOB'
},{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},{
xtype: 'textfield',
name: 'age',
fieldLabel: 'Age'
}]
});
}
});
Go to the fiddle, First enter the date, scroll down and enter name and age. Now again scroll to top and try to modify the date. Screen goes off. Screen will return when you give a mouse click.
PS: this is occuring only in EXt js 6. Not in any earlier version.

Answer 1

Figured it out...
in scorallable container, picker is not aligning to component after layout. We are doing it manually with the below override.
Ext.override(Ext.picker.Date, {
afterComponentLayout: function (width, height, oldWidth, oldHeight) {
var field = this.pickerField;
this.callParent([
width,
height,
oldWidth,
oldHeight
]);
// Bound list may change size, so realign on layout
// **if the field is an Ext.form.field.Picker which has alignPicker!**
if (field && field.alignPicker) {
field.alignPicker();
}
}
});