滚动面板时，日期选择器未正确打开

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&sencha fiddle 中的fiddle/34n9

Answer 1

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

更好的使用，例如：

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

但这并没有解决日期选择器的问题。

我改成了6.0.2，在那个版本中，问题似乎已经解决了。明天我会试着看看这些解决这个问题的小版本之间发生了什么变化，但也许你也可以看看。

如果你想测试它，我为它制作了一把小提琴。

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