ExtJS 4 Grid问题求助：选中单元格样式、复选框编辑与背景异常

我来帮你逐个搞定这些ExtJS Grid单元格编辑的实际问题，都是开发中很容易踩的坑：

1. 修改选中单元格的蓝色背景框样式 #

ExtJS默认的选中单元格样式是靠CSS类控制的，你可以通过自定义CSS覆盖它，注意要保证选择器优先级足够高：

/* 针对处于编辑状态的选中单元格 */
.x-grid-cell-selected.x-grid-editor {
    background-color: #your-custom-color !important;
    /* 要是需要改边框也能在这加 */
    border-color: #your-border-color;
}

/* 针对普通选中（未编辑）的单元格 */
.x-grid-cell-selected {
    background-color: #your-custom-color !important;
}

把这段CSS加到你的样式文件里，替换成你想要的颜色就行。如果还是不生效，可以给Grid加个自定义类（比如my-custom-grid），然后用更具体的选择器：.my-custom-grid .x-grid-cell-selected，优先级更高就不会被默认样式覆盖了。

2. 复选框勾选后切换位置取消勾选 + Renderer背景部分生效 #

复选框状态丢失的问题 #

这个大概率是编辑后的数据没同步到Store，或者复选框列的Editor配置不对。你要确保：

• 复选框列正确配置Editor，绑定对应的数据字段：

{
    text: '复选框列',
    dataIndex: 'isChecked',
    editable: true, // 允许编辑
    editor: {
        xtype: 'checkbox',
        inputValue: true,
        uncheckedValue: false
    },
    renderer: function(value) {
        // 渲染静态复选框（编辑时才会变成可点击的）
        return value ? '<input type="checkbox" checked disabled/>' : '<input type="checkbox" disabled/>';
    }
}

• 保证Store里isChecked字段是布尔类型，同时给CellEditing插件开自动同步：

plugins: {
    ptype: 'cellediting',
    clicksToEdit: 1,
    autoSync: true // 编辑完成自动把数据同步到Store
}

另外，要只允许指定两列编辑，记得给其他列加editable: false。

Renderer背景部分生效的问题 #

你的Renderer代码漏了返回value！Renderer必须返回要显示的内容，不然ExtJS的渲染逻辑会乱，导致样式只生效一部分。修改后的代码应该是：

renderer: function(value, meta) {
    // 先排除汇总行（顺便解决第三个问题）
    if (meta.record && meta.record.isSummary()) {
        return value;
    }
    meta.style = "background-color:lightgray;";
    return value; // 这行绝对不能少！
}

3. 汇总行被误染色的问题 #

汇总行有专属的CSS类x-grid-summary-row，有两种解决思路：

方法1：在Renderer里判断是否为汇总行 #

刚才第二个问题的Renderer已经加了判断，通过meta.record.isSummary()可以识别汇总记录，不对它设置背景样式。

方法2：用CSS精准排除汇总行 #

如果是通过全局CSS设置列背景，就用:not()选择器避开汇总行：

/* 只给非汇总行的目标列加背景 */
.my-custom-grid .x-grid-row:not(.x-grid-summary-row) .target-column {
    background-color: lightgray;
}

这里的.target-column需要你给目标列配置cls: 'target-column'，这样就能精准定位，不会影响汇总行。

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