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

对于第二种fildset，设置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();

带有extjs的滚动条

1 个答案: