Posts Tagged ‘grid cell’

Extjs change grid cell background based on value

October 20th, 2014 No comments

If you want to change the color of a Grid cell Grid, use the renderer attribute.
Example: Suppose you have a cell that has a numeric value. If this value is greater than 0, then the background color is green, otherwise it is red.
Here’s a code that describes:

renderer : function(v, md) 
    if(parseInt(v) > 0) = "background-color:green;";
    else = "background-color:red;";

Set background color for Grid column in ExtJS4

August 6th, 2013 1 comment

If you need a specific grid column set to a different color, for example. red, you can do the following:

  • In the column settings for a given column add the attribute tdCls:’cell-red’ where the cell-red is CSS class and then
  • In the CSS file where the styles for your application (be sure the CSS load after extjs-all.css) add the following line:
    .cell-red	.x-grid-cell-inner	{ background-color:#ffe0e0; } 

If necessary, you can further modify column style.

ExtJS4 Grid Cell click event

February 13th, 2013 No comments

If you need to Grid object react by clicking on a specific cell, not the entire row, this post is for you. It was first implemented into the ExtJS 3. On this occasion used the index of the column, can not use the name of the column used for the header.

Example of adding events would be:

listeners: {
    cellclick: function(gridView,htmlElement,columnIndex,dataRecord)
        if(columnIndex == 3) {
            // Here insert the code that will be executed
            // when you click on the 4th column in the Grid object
Categories: JavaScript Tags: , ,