Ext JS 6.5.3 GridPanel单元格换行与渲染器冲突致显示不一致求助

针对换行单元格与普通单元格显示不一致的问题，可以通过以下几种方案解决：

1. 统一单元格垂直对齐样式 #

通过自定义CSS类给所有单元格设置一致的垂直对齐方式，确保内容无论是否换行都对齐到同一位置：

步骤1：给Grid添加自定义行类 #

Ext.create('Ext.grid.Panel', {
    // 其他核心配置
    viewConfig: {
        getRowClass: function() {
            return 'grid-uniform-row';
        }
    },
    columns: [
        {
            dataIndex: "header",
            menuDisabled: true, 
            sortable: false,
            cellWrap: true,
            renderer: myRenderer
        }
        // 其他列配置
    ]
});

步骤2：编写CSS样式 #

.grid-uniform-row .x-grid-cell {
    vertical-align: middle; /* 可根据需求改为top/bottom */
    line-height: 1.4; /* 统一行高，避免换行后行高差异 */
}

2. 强制固定行高 #

如果希望所有行高度完全一致，可通过CSS或Grid配置固定行高：

CSS方案（兼容性更强） #

.x-grid-row {
    height: 42px !important; /* 根据需求调整高度值 */
}
.x-grid-cell-inner {
    height: 100%;
    display: flex;
    align-items: center; /* 垂直居中内容 */
    padding: 0 6px; /* 统一内边距 */
}

列配置辅助方案 #

给目标列添加tdCls，针对性设置样式：

{
    dataIndex: "header",
    menuDisabled: true, 
    sortable: false,
    cellWrap: true,
    renderer: myRenderer,
    tdCls: 'fixed-height-cell'
}

对应CSS：

.fixed-height-cell {
    min-height: 42px;
    vertical-align: middle;
}

3. 在渲染器中统一包裹内容 #

修改myRenderer，给所有单元格内容添加统一的容器，确保布局规则一致：

function myRenderer(value) {
    return '<div class="standard-cell-content">' + value + '</div>';
}

配套CSS：

.standard-cell-content {
    padding: 8px 4px;
    line-height: 1.4;
    min-height: 36px;
    display: flex;
    align-items: center;
}

以上方案可根据实际布局需求选择，优先推荐CSS统一样式的方式，改动最小且效果稳定。

内容的提问来源于stack exchange，提问作者Koori koori