Advanced Search

Extjs : render a cell in grid with a custom class, based on criteria of other field

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // Target =
  2. // to add a green marker to the record that we changed latest in the grid. This is shown after
  3. // the grid is reloaded. So a field is set on the server (field = 'modified') and at rendering
  4. // it is shown with a green corner, for it's class will be set when the 'modified' field is value
  5. // '1'
  6.  
  7.  
  8. // in the column model (excerpt)
  9.         this.colModel = new Ext.grid.ColumnModel({
  10.             columns: [
  11.             // { header: " Id", width: 10, dataIndex: 'us_id'},
  12.             {
  13.                 header       : "Schlussel",
  14.                 width        : 100,
  15.                 dataIndex    : 'se_pkey',
  16.                 renderer     : showUpdated
  17.             },{
  18.  
  19.  
  20. // showUpdated is checking if field modified in record.data (not a column) has
  21. // been set to '1'. Updated in f.e. PHP and is adding a class over it's meta.css
  22. // to this cell        
  23.  
  24.         function showUpdated (val, meta, record, rowIndex, colIndex, store) {
  25.  
  26.             if (record.data.modified == '1') {
  27.                 meta.css += ' y-grid3-updated-cell';
  28.             }
  29.             return val;
  30.         }
  31.  
  32.  
  33. // css styles (custom), the image is a "green" version of the image dirty.gif from the images directory of Extjs (3.2)
  34. // modified with a Photo modification software.
  35.  
  36.  
  37.    /* updated cells */
  38.    .y-grid3-updated-cell {
  39.       background: transparent no-repeat 0 0;
  40.    }
  41.  
  42.    .y-grid3-updated-cell {
  43.       background-image:url(../img/updated.gif);
  44.    }
  45.  
  46.  

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.