Question

我试着找到这个问题的答案，但我不能。所以我有简单的网格，插件由插件编辑（Ext.grid.plugin.CellEditing）。所以在这种情况下，我看到选中的单元格显示在“bluebox”中。

但我不想看到这样的选择，我想改变这个背景。有任何建议请。

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

这个数字带有灰色backgruond和这个复选框。第一个工作正常，但是这个复选框没有（当我检查它并转到其他位置检查位置变为未选中时）并且不能设置与我为具有数字的列设置的相同背景。这可以通过以下方式完成：

renderer: function(value, meta) {
          meta.style = "background-color:lightgray;";
      }

这个方法，在复选框列中给我这个：

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

好的，几乎可以，因为你的帮助，但当我通过css更改背景时，我看到以下结果（摘要行也是，部分是背景颜色'），但仍然不知道为什么以及如何纠正它：

Answer 1

您可以在CellEditing中使用css实现所选单元格。

在 FIDDLE 中，我使用CellEditing插件创建了一个演示版。希望这有助于/指导您实现您的要求。

CODE SNIPPET

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>

您还使用了单元格编辑器组件模糊事件的另一种方法。你需要把这个放在代码下面

var selectionModel = grid.getSelectionModel();
selectionModel.deselect(selectionModel.selection.record)

Answer 2

只需要覆盖内嵌 css，这样就可以改变背景颜色，即..，

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

ExtJS 4 -grid选择的单元格颜色

2 个答案: