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

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 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 Lets add a listener to our grid after line "stateful: false" The listener Ok so lets add a itemclick listener.  Forget about the commented method deselectNice()  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.   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 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 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 … [Read more...]