ExtJS 4 Grid Change Cell Color by adding and removing classes programatically

• Tweet

• Tweet

Hello,

I am sharing this bit because I was at cross roads trying to figure out the solutions.

So let me show you how you can add and remove a class from a Grid cell.

Ok lets consider this Grid,

The ExtJS4 Grid

var grid = null;
 
Ext.onReady(function(){
    var names = {'names':[
        { 'name': 'Jas',  "email":"[email protected]",  "phone":"111-111-1111"  },
        { 'name': 'Chahal',  "email":"[email protected]",  "phone":"111-111-1111" },
        { 'name': 'Yuv', "email":"[email protected]",  "phone":"111-111-1111"  },
        { 'name': 'Chahal', "email":"[email protected]", "phone":"111-111-1111"  }
        ]
    };
    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
            'name','email','phone'
        ],
        data:names,
        proxy: {
            type:'memory',
            reader: {
                type:'json',
                root: 'names'
            }
        }
    });
 
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {
                text     : 'Name',
                width     : 100,
                dataIndex: 'name'
            },
            {
                text     : 'Phone number',
                width     : 120,
                dataIndex: 'phone'
            },
            {
                text     : 'Email',
                flex     : 1,
                dataIndex: 'email'
            }
        ],
        height: 350,
        width: 400,
        title:'Iteration example',
        renderTo: 'iteration',
        stateful: false
    });
});

Just for the sake of demo I would like to show you couple of techniques that can be really helpful if you are trying to do something specific.

First lets write a simple CSS class definition as shown below that we will be using later to highlight our cell

The CSS

<style type="text/css">
.black {
    background: #000;
    color:#FFF;
}
</style>

The listener

Ok so lets add a itemclick listener.  Forget about the commented method deselectNice() 

,
        listeners:{
            itemclick:function(view,record,item,index,evt) {
                // deselectNice();
                Ext.get(evt.target).addCls('black');
            }
        }

So in the code above we are getting hold of the event target i.e. in our case a grid cell. That will work but here is a second option that you can use and gives you a little bit more.

,
        listeners:{
            itemclick:function(view,record,item,index,evt) {
                // deselectNice();
                var selection = grid.getView().getSelectionModel().getSelection()[0];
                var dom = (grid.getView().getSelectedNodes()[0]);
                tds = Ext.get(dom).select("div");
                Ext.get(tds.elements[evt.target.offsetParent.cellIndex]).addCls('black');
            }
        }

If you do it the way stated above that will work too and it gives you an indication that evt.target.offsetParent.cellIndex can be replaced by a number to add a class for good to a columns and event could be any.

Now lets check how we can remove an added css class from our grid cell element.

uncomment our deselectNice() method above

and add this code somewhere after our grid variable

// nicer way 
    var deselectNice = function () {
        Ext.select("div.black").removeCls('black');
    }

With the method above we are querying the DOM to get all elements with class black and then removing it. Thats nice and easy. Now lets check another a bit not so nice method but offers a bit flexibility to me

// another way
    var deselect = function () {
        var selection = grid.getView().getSelectionModel().getSelection()[0];
        var nodes = grid.getView().getNodes();
        Ext.each(nodes, function (node) {
            deselects = Ext.get(node).select("div");
                Ext.each(deselects, function (desel) {
                Ext.get(desel).removeCls('black');
            });
        });
    }

The above does the same thing but it provides a little more flexibility in way if you want to do if,else conditions, most of the things can be achieved by DOM queries anyway.

The DEMO

To check out what we have done check this example page out.

You can easily copy paste the code from this page by viewing source

http://jaspreetchahal.org/examples/extjs-grid-cell-add-remove-class.html

I hope that this helps

I am sorry if I am a little vague but you should get the idea

Cheers