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


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



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.