Extjs Grid - 基于内容的适合高度？答案

【问题标题】：Extjs Grid - fit height based on content?Extjs Grid - 基于内容的适合高度？
【发布时间】：2020-08-13 15:19:58
【问题描述】：

如何设置网格的高度以适应其内容？

在这里看到这个小提琴，第一个网格有一个height: 200，没关系。第二个没有高度，我想让高度适合网格内容。显示网格标题和列标题，但不显示网格行。

https://fiddle.sencha.com/#view/editor&fiddle/385b

【问题讨论】：

标签： extjs

【解决方案1】：

您可以在第二个网格中使用 layout: 'vbox' 和 flex: 1 。像这样的：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            data: [{
                'name': 'Lisa',
                "email": "lisa@simpsons.com",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "bart@simpsons.com",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "home@simpsons.com",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "marge@simpsons.com",
                "phone": "555-222-1254"
            }]
        });

        Ext.create('Ext.Container', {
            fullscreen: true,
            layout: 'vbox',
            defaults: {
                style: 'border: 1px solid grey;' // To see the borders
            },
            items: [{
                title: 'Simpsons - height: 200',
                xtype: 'grid',
                height: 200,
                store: store,
                columns: [{
                    text: 'Name',
                    dataIndex: 'name',
                    width: 200
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    width: 250
                }, {
                    text: 'Phone',
                    dataIndex: 'phone',
                    width: 120
                }],
            }, {
                title: 'Simpsons - autofit?',
                xtype: 'grid',
                flex: 1,
                store: store,
                columns: [{
                    text: 'Name',
                    dataIndex: 'name',
                    width: 200
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    width: 250
                }, {
                    text: 'Phone',
                    dataIndex: 'phone',
                    width: 120
                }],
            }, {
                xtype: 'container',
                html: "Some other content"
            }]
        })
    }
});

【讨论】：

是的，确实这种“类型”解决了它。我想知道是否有可能避免使用 flex 而只是在网格之后显示“一些其他内容”。
您可以在第二个网格中使用底部工具栏（停靠项）并在其中放置一些文本.. 或者您可以只使用两个组件，第一个是具有高度的网格，第二个是具有高度的容器grid 和 some-other-content.. 你可以使用不同的布局。
我已经发布了我从 sencha 支持团队获得的解决方案。看起来不错。
'inifinite: false' 已经隐藏了网格的内容。 'maxHeight: 700' 是可以的，但如果第二个网格中有 >100 行，则需要垂直滚动才能看到“一些其他内容”。

【解决方案2】：

解决方案是指定以下 2 个之一：

maxHeight 网格属性

或

将infinite 设置为false。

    //maxHeight: 800,
    infinite: false,

https://fiddle.sencha.com/#fiddle/386n

【讨论】：