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

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

0 голосов
/ 25 марта 2020

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

1 Ответ

0 голосов
/ 25 марта 2020

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

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

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

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

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

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

Вот скрипка: https://fiddle.sencha.com/#view / редактор и скрипка / 34nl

...