Полоса прокрутки с extjs - PullRequest
Новая
       21

Полоса прокрутки с extjs

1 голос
/ 12 июня 2019

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

Ext.create('Ext.window.Window', {
    width: 800,
    height: 300,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'fieldset',
        items: [{
            fieldLabel: 'foo',
            xtype: 'textfield'
        }]
    }, {
        xtype: 'fieldset',
        scrollable: 'y',
        items: [{
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }]
    }]
}).show();

1 Ответ

1 голос
/ 12 июня 2019

Для набора полей secound установите flex: 1, чтобы получить видимую полосу прокрутки. Затем он получит оставшуюся высоту оконного контейнера. 

Ext.create('Ext.window.Window', {
    width: 800,
    height: 300,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'fieldset',
        items: [{
            fieldLabel: 'foo',
            xtype: 'textfield'
        }]
    }, {
        xtype: 'fieldset',
        scrollable: 'y',
        flex: 1, // <---------- here
        items: [{
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }, {
            fieldLabel: 'foo',
            xtype: 'textfield'
        }]
    }]
}).show();
...