Выбор даты не открывается правильно при прокрутке панели

У меня есть панель, содержащая количество текстовых полей и полей даты. Например, сначала у меня есть 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 в скрипке сенчи


extjs6-classic
person Jaydeep Maheta    schedule 25.03.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Прежде всего. Вы не должны использовать layout: 'fit' таким образом. Контейнер с таким макетом должен содержать только один дочерний элемент.

Лучше использовать, например:

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

Но это не решило проблему с датпикером.

Я перешел на 6.0.2 и в той версии проблема вроде исправлена. Я постараюсь завтра посмотреть, что изменилось между этими минорными версиями, которые исправили эту проблему, но, может быть, вы тоже могли бы посмотреть.

Если вы хотите проверить это, я создал для него скрипку.

Вот скрипка: https://fiddle.sencha.com/#view/editor&fiddle/34nl< /а>

person KaMun    schedule 25.03.2020
comment
Спасибо, KaMun, я переопределил функцию doAlign, и она работает. - person Jaydeep Maheta; 26.03.2020