ExtJS Grid锁定列非整数缩放时样式错位问题求助

这个问题的核心是浏览器非整数比例缩放时，锁定Grid的两个独立表格（锁定区和非锁定区）的列宽计算出现小数像素差异，导致边框/间隔线无法对齐。以下是几种可行的修复方案：

方案1：重写锁定列宽度计算逻辑 #

通过重写Ext.grid.locking.Lockable的updateLockedWidth方法，强制将计算后的宽度转为整数，避免小数像素带来的渲染偏差：

Ext.define('MyApp.override.grid.locking.Lockable', {
    override: 'Ext.grid.locking.Lockable',

    updateLockedWidth: function(width) {
        // 将宽度转为整数后再传递给父类方法
        width = Math.round(width);
        this.callParent([width]);
    }
});

同时，在列初始化或布局时，确保列宽也使用整数：

Ext.create('Ext.grid.Panel', {
    // 其他配置
    columns: [
        { text: '锁定列1', locked: true, width: 150 }, // 用整数宽度
        { text: '普通列1', width: 200 },
        // 更多列...
    ]
});

方案2：自定义CSS修正边框对齐 #

针对锁定区和非锁定区的边框样式做调整，强制对齐：

/* 锁定区右侧边框 */
.x-grid-locked .x-grid-inner-locked {
    border-right: 1px solid #ccc;
    transform: translateX(0.5px); /* 根据缩放比例微调，125%缩放时可能需要这个值 */
}

/* 非锁定区左侧边框隐藏，避免双重边框 */
.x-grid-unlocked .x-grid-inner-unlocked {
    border-left: none;
}

注意：transform的偏移值可能需要根据实际缩放比例调整，或者通过动态计算注入CSS。

方案3：监听窗口缩放事件重新布局 #

监听窗口的resize事件，当检测到缩放比例变化时，强制Grid重新计算布局：

var grid = Ext.create('Ext.grid.Panel', {
    // 配置项...
    listeners: {
        afterrender: function(grid) {
            Ext.EventManager.onWindowResize(function() {
                // 获取当前页面缩放比例
                var scale = window.devicePixelRatio || 1;
                // 如果是非整数缩放，强制重新布局
                if (scale % 1 !== 0) {
                    grid.getView().refresh();
                    grid.getLockedView().refresh();
                    grid.updateLayout();
                }
            });
        }
    }
});

额外建议 #

• 尽量避免使用百分比列宽，优先使用固定整数宽度，减少缩放时的计算误差。
• 升级到最新版本的ExtJS Classic，官方可能已经修复了这类渲染兼容性问题。

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