带有 extjs 的滚动条

Question

我想在第二个字段集中显示垂直滚动条，但字段集的高度似乎总是适应其内容。
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();

Answer 1

对于第二个字段集，设置 flex: 1 以获得可见的滚动条。然后它将接收 window 容器的剩余高度。

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();

带有 extjs 的滚动条

Scrollbar with extjs

scroll

extjs

extjs6