Colors ExtJS 4-网格选定单元格颜色

Colors ExtJS 4-网格选定单元格颜色,colors,background,grid,extjs4,cell,Colors,Background,Grid,Extjs4,Cell,我试图找到这个问题的答案,但我做不到。因此,我有一个简单的网格,其中单元格按插件进行编辑(Ext.grid.plugin.CellEditing)。所以在这种情况下,我看到选定的单元格显示在“bluebox”中 但我不想看到这样的选择,我想改变这个背景。有什么建议吗 谢谢Jadhav,我看到了这个网格中的第二个问题。我只想编辑两列: 此选项包含灰色背景的数字和此复选框。第一个复选框工作正常,但该复选框不工作(当我选中它并转到其他位置时,选中的位置变为未选中),并且无法设置与我为带数字的列设置

我试图找到这个问题的答案,但我做不到。因此,我有一个简单的网格,其中单元格按插件进行编辑(Ext.grid.plugin.CellEditing)。所以在这种情况下,我看到选定的单元格显示在“bluebox”中

但我不想看到这样的选择,我想改变这个背景。有什么建议吗

谢谢Jadhav,我看到了这个网格中的第二个问题。我只想编辑两列:

此选项包含灰色背景的数字和此复选框。第一个复选框工作正常,但该复选框不工作(当我选中它并转到其他位置时,选中的位置变为未选中),并且无法设置与我为带数字的列设置的相同的背景。这是通过以下方式实现的:

renderer: function(value, meta) {
          meta.style = "background-color:lightgray;";
      }    
此方法在复选框列中提供以下内容:

为什么以及如何解决这个问题


好的,由于您的帮助,几乎可以,但当我通过css更改背景时,我看到以下结果(摘要行也是,部分为背景色),但仍然不知道为什么以及如何更正它:


您可以对中的选定单元格使用css实现

在这个中,我使用
CellEditing
插件创建了一个演示

代码段:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'demostore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254'
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Demo Data',
            store: 'demostore',
            cls:'my-grid',
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                editor: 'textfield'
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }, {
                header: 'Phone',
                dataIndex: 'phone'
            }],
            selType: 'cellmodel',
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            height: 200,
            renderTo: Ext.getBody()
        });
    }
});
CSS

<style>
    .my-grid .x-grid-cell-selected{
        background-color: transparent !important;
    }
</style>

只需覆盖内联css,就可以更改背景颜色,即

.x-grid-row-selected .x-grid-td {
    background: #ffffff;
}

好的,我用css改变了背景,但是像这样:“.x-status-cell.x-grid-cell-inner{背景色:浅灰色!重要;}”和字段定义:“tdCls:'x-status-cell',但是看看新图片,不知道为什么
.x-grid-row-selected .x-grid-td {
    background: #ffffff;
}