EXTJS技术问题：网格列渲染器设置record值异常，求和功能实现受阻

你猜的没错！问题根源就是GridColumn的renderer只负责修改单元格的显示内容，完全不会改动底层的record数据。你在renderer里直接操作record，相当于绕开了ExtJS的数据绑定机制，自然会触发内部的异常提示——毕竟renderer的设计初衷就是纯展示层的处理，不该碰数据源的。

给你几个针对性的解决方案，完美适配你的需求：

1. 在下拉框事件里直接更新record数据 #

别在renderer里搞事情，把数据更新的逻辑放到下拉框的change事件里。遍历Grid的store，用record.set()方法修改字段值，这样底层数据和显示会自动同步，求和功能也能基于真实数据计算：

// 下拉框的change事件处理函数
onChange: function(combo, newValue) {
    const grid = Ext.ComponentQuery.query('#yourGrid')[0];
    const store = grid.getStore();
    
    store.each(record => {
        const currentVal = record.get('dynamicField');
        // 根据选择的increase/decrease计算新值
        const updatedVal = newValue === 'increase' ? currentVal + 1 : currentVal - 1;
        // 真正更新record的数据，这会自动触发Grid重新渲染
        record.set('dynamicField', updatedVal);
    });
}

2. Renderer只做显示格式化 #

如果需要对字段显示做调整，renderer只处理返回值就好，绝对不要碰record：

renderer: function(value) {
    // 比如给数值加个单位，或者格式化小数
    return `${value.toFixed(2)}`;
}

3. 求和功能基于store真实数据计算 #

实现Sum功能时，直接遍历store里的record取字段值求和，别依赖renderer的返回值，这样结果才准确：

function calculateTotalSum() {
    const grid = Ext.ComponentQuery.query('#yourGrid')[0];
    const store = grid.getStore();
    let total = 0;
    
    store.each(record => {
        total += record.get('dynamicField') || 0;
    });
    
    // 把求和结果显示到页面的指定组件
    Ext.ComponentQuery.query('#sumDisplay')[0].setValue(total);
}

这样调整后，底层数据和显示内容完全一致，既不会触发开发者工具里的异常，求和功能也能稳定工作——毕竟完全遵循了ExtJS的数据绑定规范～

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