如何：在 Ext JS4 中自动调整 GridPanel 列宽 + 读取网格中的所有列值

Posted 2023-02-26

【中文标题】如何：在 Ext JS4 中自动调整 GridPanel 列宽 + 读取网格中的所有列值

【英文标题】：How To: Auto Resize GridPanel Column Width + Read all Column Values in a Grid in Ext JS4

【发布时间】：2011-08-30 16:26:24

【问题描述】：

问题1：有没有我可以自动设置gridpanel的列宽， 基于重新调整的列数据值长度（列宽 = 最大数据值 字符串长度）

问题 2：为了实现上述目标（以及其他原因），我需要知道如何获得 特定的网格列？一旦我知道逻辑，应该将其实现为列 渲染器功能？每次都会调用列渲染器函数，一个数据 记录被读取（然后它的过度杀伤）？在这种情况下，我可以覆盖任何其他功能吗？

大多数解决方案（网格列宽计算器， autoResizeColumns 等）我在网上找到的是以前的版本，我使用的是 EXTJS 4 版本。

提前致谢 斯科特

【参考方案1】：

实际上有一个 Extjs 4 插件可以根据内容的宽度以及标题自动调整网格列的大小。

这里是链接：Extjs 4 column auto resize plugin

【参考方案2】：

很遗憾，没有。最好的办法是为通常固定的数据设置指定的宽度，然后使用flex 设置其他列。 （或编写/等待插件）。

值不存储在grid 中，它们存储在grid 的store 中。您只需要循环有问题的store 并从指定列中获取所有值。例如：

Ext.Array.each(Ext.StoreManager.get('myStore').getRange(0), function(record)
    console.log(record.get("myColumnName")); 
);

【参考方案3】：

我找到了一个使用 CSS 包装列的临时修复方法，如下所述： ExtJS 4 - Wrapping the column headers in grid panel

将以下内容添加到 ext js css

.x-column-header-inner 
    line-height: normal;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: center;
    top: 20%;


.x-column-header-inner .x-column-header-text 
    white-space: normal;