Ext JS Grid Row Background Color Set

Question

How would I go about setting the background colour of an Ext JS Grid row, mainly just the selected item(s).

Any help would be greatly appreciated.

Answer 1

To change the selected row color you have to override the appropriate CSS class:

.x-grid3-row-selected {
   background-color: red !important;
}

You could also override the default border-color if you want using that class.

The getRowClass function, on the other hand, is for adding a static CSS class to rows using business logic to determine which rows are affected. You could also achieve row coloring that way, but it would not affect highlighted row color (although you could also write CSS that used both classes together to do so).

EDIT: To change the row style programmatically you will still want to define your styles statically in CSS, then simply add/remove CSS classes dynamically as needed. E.g., assuming a grid and a button with id 'my-btn', clicking the button will add a class (could be defined just like .x-grid3-row-selected as shown above) to the first row in the grid, applying whatever style is in the CSS class. It's up to you to define your real business logic for selecting row(s), but this is the syntax:

Ext.get('my-btn').on('click', function(){
    Ext.fly(myGrid.getView().getRow(0)).addClass('error');
});

Answer 2

Hi, I am new to EXTJS

I am trying to display grid row depending on the row data/ or Cell Data. I tried to compare Data with a certain value and define a class for the row.But it did not work like this. CAN SOME BODY HELP. :[ PLS.

Here is My Code

CSS: .red-row{ background-color: #F5C0C0 !important; } .yellow-row{ background-color: #FBF8BF !important; } .green-row{ background-color: #99CC99 !important; }

link to Lirary... SCRIPT:

  Ext.onReady(function() {

  // 
   var data = [
      ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
      ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
      ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
      ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
      ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
      ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
      ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
      ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
      ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
      ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
      ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
      ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
      ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    // create the data store and load the data
    var store = new Ext.data.ArrayStore({
      fields: [
       {name: 'company'},
       {name: 'price',      type: 'float'},
       {name: 'change',     type: 'float'},
       {name: 'pctChange',  type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
      ]
    });

    store.loadData(data);
    //create and render the grid
    var grid = new Ext.grid.GridPanel({
      height : 350,
      width  : 600,
      title  : 'Exportable grid',
      store  : store,

  getRowClass : function (row, index) {
  var cls = '';
  var store = row.store;
  switch (store.company) {
     case 'Alcoa Inc' :
        cls = 'yellow-row'// highlight row yellow
        break;
     case '3m Co' :
        cls = 'green-row'
        break;
     case 'Altria Group Inc' :
        cls = 'red-row'
        break;
  }//end switch
  return cls;

}, columns: [ {header: 'Company', width: 160, sortable: true, align: 'right', dataIndex: 'company', id:'company'}, {header: 'Price', width: 75, dataIndex: 'price', renderer: 'usMoney'}, {header: 'Change', width: 75, dataIndex: 'change'}, {header: '% Change', width: 75, dataIndex: 'pctChange'}, {header: 'Last Updated', width: 85, dataIndex: 'lastChange', renderer: Ext.util.Format.dateRenderer('m/d/Y')} ] }); grid.render('grid'); //finally, remove the loading mask (function(){ Ext.get('loading').remove(); Ext.get('loading-mask').fadeOut({remove:true}); }).defer(250); });

Answer 3

This solution works nicely...except that after coloring a row and then sorting or changing the order, the color disappears from the row. How can this be prevented?