extjs - Ext js 6：可滚动容器中的日期字段不起作用

Question

可滚动容器中的日期字段未正确呈现其选择器。这是小提琴。

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'
        }]
    });
}
});

转到小提琴，首先输入日期，向下滚动并输入姓名和年龄。现在再次滚动到顶部并尝试修改日期。屏幕熄灭。当您单击鼠标时，屏幕将返回。

PS：这仅在 EXt js 6 中发生。在任何早期版本中都没有。

Answer 1

想通了...在可缩放容器中，选择器在布局后未与组件对齐。我们使用以下覆盖手动执行此操作。

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