滚动面板时日期选择器无法正确打开

Question

我有一个包含文本字段和日期字段数量的面板。例如，首先我有15个文本字段，然后在第16位上有日期归档。

最初，当我打开它时，它可以按预期工作，但是当我滚动一次或多次时，日期选择器无法正确对齐，并且背景图像也应该为空白白色。

下面是我的代码，

    Ext.application({
    name: 'Fiddle',

    launch: function () {

        var fields = [{
                xtype: 'fieldset',
                padding: 10,
                defaults: {
                    labelSeparator: ''
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Field1',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field2',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field3',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field4',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field5',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field6',
                    anchor: '100%'
                }]
            }, {
                xtype: 'fieldset',
                padding: 10,
                defaults: {
                    labelSeparator: ''
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Field7',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field8',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field9',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field10',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field11',
                    anchor: '100%'
                }]
            },{
                xtype: 'fieldset',
                padding: 10,
                defaults: {
                    labelSeparator: ''
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Field12',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field13',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field14',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field15',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field16',
                    anchor: '100%'
                }]
            }, {
                xtype: 'fieldset',
                padding: 10,
                defaults: {
                    labelSeparator: ''
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Field17',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field18',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field19',
                    anchor: '100%'
                }, {
                    xtype: 'datefield',
                    fieldLabel: 'Date1',
                    anchor: '100%',
                    format: 'd/m/y'
                }, {
                    xtype: 'datefield',
                    fieldLabel: 'Date2',
                    anchor: '100%',
                    format: 'd/m/y'
                }]
            }, {
                xtype: 'fieldset',
                padding: 10,
                defaults: {
                    labelSeparator: ''
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Field20',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field21',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Field22',
                    anchor: '100%'
                }, {
                    xtype: 'datefield',
                    fieldLabel: 'Date3',
                    anchor: '100%',
                    format: 'd/m/y'
                }, {
                    xtype: 'datefield',
                    fieldLabel: 'Date4',
                    anchor: '100%',
                    format: 'd/m/y'
                }]
            }];

        Ext.create('Ext.form.Panel', {
            title: 'Hello',
            layout: 'fit',
            width: '50%',
            scrollable: true,
            items: fields,
            renderTo: Ext.getBody()
        });
    }
});

也可以在小提琴中检查https://fiddle.sencha.com/#view/editor&fiddle/34n9

Answer 1

首先。您不应该这样使用layout: 'fit'。具有这种布局的容器应仅包含一个子项。

更好地使用，例如：

        layout: {
            type:'vbox',
            align: 'stretch'
        }

但是那不能解决日期选择器的问题。

我更改为6.0.2，在该版本中，问题似乎已解决。我明天将尝试看看这些次要版本之间的哪些变化解决了该问题，但也许您也可以看一下。

如果您要测试它，我为此创建了一个小提琴。

这里是一个小提琴：https://fiddle.sencha.com/#view/editor&fiddle/34nl