Search code examples
colorsbackgroundgridextjs4cell

ExtJS 4 -grid selected cell color

I try to find answer for this question but I can't. So I have simple grid with cells editting by plugin (Ext.grid.plugin.CellEditing). So in such a case I see selected cell displayed in "bluebox".

enter image description here

but I dont want to see such a selection, I want to change this background. Any suggestion please.

Thank you Jadhav, and I see the second problem in this grid. I want to edit only two columns:

enter image description here

this numbers with gray backgruond and this checkbox. The first one is working good but this checkbox not (when I check it and go to other place checked position become unchecked) and can't set the same background as I set for column with numbers. This is done by:

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

This method, in checkbox column give me this:

enter image description here

Why and how to solve this?

OK, almost ok because of your help but when I change background via css I see the following result (summary row is also, partly in background color') and still don't know why and how to correct it:

enter image description here

Solution

  • You can implement using css for selected cell in CellEditing.

    In this Fiddle, I have created a demo using CellEditing plugin.

    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>

    One more way you also done using on cell editor component blur event. You need to do put this below code

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