Change the backcolor for ExtJs 4.2 grid column based on some condition

Question

I am using ExtJs 4.2 editable grid. When user edit a cell, I need to change the backcolor of the entire column. I am using onCellEdit event which gives me the column index. But I am not able to find any property or method which will allow me to change the backcolor.

Please help

Can I ask why you would change a whole columns color based on one cells data? It would be handy if you could show a fiddle re-creating your grid and explaining what your trying to acheive. — Scriptable, Feb 28 '15 at 14:05
In my gird I have a column by name user & one column by name percentAllocated . A user can appear in multiple rows. When i modify percentAllocated field, the sum of the field for the user should not be more than 100% This is why I want to highlight entire column. — SharpCoder, Feb 28 '15 at 14:18

Scriptable · Answer 1 · 2015-02-28T15:31:24.687

Once your logic has determined that the colour of the background needs to change you get the column index and set the tdCls class to a relevant CSS class. Make sure you call refresh on the grids view once you've finsihed changing configuration.

I've created a fiddle to demonstrate the concept.

<style>
.invalid-column, .x-grid-row-alt > .invalid-column {
    background-color: red; 
    color: white;
}
</style>


Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.data.Store', {
            storeId: 'userStore',
            fields: ['user', 'percent'],
            data: {
                'items': [{
                    'user': 'John',
                    "percent": 50
                }, {
                    'user': 'John',
                    "percent": 20
                }, {
                    'user': 'John',
                    "percent": 20
                }, {
                    'user': 'John',
                    "percent": 10
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });

        Ext.create("Ext.grid.Panel", {
            renderTo: Ext.getBody(),
            title: "Test",
            store: Ext.data.StoreManager.lookup('userStore'),
            columns: [{
                header: 'User',
                dataIndex: 'user'
            }, {
                header: "Percent",
                dataIndex: "percent",
                editor: {
                    xtype: "numberfield",
                    allowBlank: false
                }
            }],
            selType: "cellmodel",
            plugins: {
                ptype: "cellediting",
                clicksToEdit: 1
            },
            listeners: {
                "edit": function(editor, context, eOpts) {

                    var store = this.getStore();
                    var total = 0;

                    store.each(function(record) {
                        total += record.get('percent');
                    });

                    if (total < 0 || total > 100) {
                        this.columns[1].tdCls ='invalid-column';
                        this.getView().refresh();
                    }
                }
            }
        });
    }
});

EDIT: Code was wrongly tested against ExtJs 5, Updated for ExtJs 4.2

score 0 · Answer 2 · answered Feb 28 '15 at 15:30

0

I have done a example where if you click on cell entire column background color will get changed.

Please go through the fiddle running exampleenter code here

answered Feb 28 '15 at 15:30

Surya Prakash Tumma

2,153
4
27
47

Change the backcolor for ExtJs 4.2 grid column based on some condition

2 Answers2