ExtJS中如何根据屏幕尺寸设置Grid相对高度及布局适配？

嘿，针对你提出的两个ExtJS Grid布局问题，我来分享下实用的解决方案：

要实现Grid行高随屏幕尺寸动态调整，核心思路是结合视口高度监听与Grid视图的行高配置，具体可以这么做：

• 利用Ext.Viewport获取当前屏幕的实时高度，通过比例计算行高；
• 监听Grid所在容器的resize事件，在屏幕尺寸变化时重新计算并更新行高；
• 借助Grid的viewConfig来控制行高，刷新视图让配置生效。

示例代码：

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    store: yourDataStore,
    columns: yourColumnConfig,
    viewConfig: {
        // 初始设置行高为视口高度的5%
        rowHeight: Ext.Viewport.getHeight() * 0.05
    },
    listeners: {
        resize: function(grid) {
            // 屏幕尺寸变化时，重新计算行高（这里设为视口高度的4%）
            var dynamicRowHeight = Ext.Viewport.getHeight() * 0.04;
            grid.getView().setRowHeight(dynamicRowHeight);
            // 刷新视图使新行高生效
            grid.getView().refresh();
        }
    }
});

如果需要行高同时适配内容和屏幕尺寸，可以结合autoHeight属性，动态调整Grid整体高度，间接实现行高的相对适配。

这个需求可以通过vbox布局配合组件的flex、collapsible属性实现，关键是让第一个Grid自适应内容，第二个Grid自动填充剩余空间：

• 外层容器使用vbox布局，并设置align: 'stretch'让子组件填满宽度；
• 第一个Grid开启collapsible: true实现折叠功能，同时设置autoHeight: true让它根据加载的数据自动调整高度，flex: 0表示不参与剩余空间分配；
• 第二个Grid设置flex: 1，这样它会自动占据第一个Grid之外的所有剩余屏幕空间，再加上autoScroll: true确保内容过多时能滚动查看。

示例代码：

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    height: '100%', // 让容器占满整个视口高度
    items: [
        {
            xtype: 'grid',
            title: '可折叠的顶部Grid',
            store: topGridStore,
            columns: topGridColumns,
            collapsible: true,
            autoHeight: true,
            flex: 0,
            listeners: {
                // 折叠/展开后刷新布局，确保底部Grid自动调整
                collapse: function(grid) {
                    grid.up('container').doLayout();
                },
                expand: function(grid) {
                    grid.up('container').doLayout();
                }
            }
        },
        {
            xtype: 'grid',
            title: '填充剩余空间的底部Grid',
            store: bottomGridStore,
            columns: bottomGridColumns,
            flex: 1,
            autoScroll: true
        }
    ]
});

注意：外层容器一定要设置height: '100%'或者绑定到Ext.Viewport，这样才能基于屏幕尺寸准确计算剩余空间。

内容的提问来源于stack exchange，提问作者akshay anand