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

Revision: 32376

at September 23, 2010 10:00 by jvandemerwe

Initial Code

// Target =
// to add a green marker to the record that we changed latest in the grid. This is shown after
// the grid is reloaded. So a field is set on the server (field = 'modified') and at rendering
// it is shown with a green corner, for it's class will be set when the 'modified' field is value
// '1'


// in the column model (excerpt)
        this.colModel = new Ext.grid.ColumnModel({
            columns: [
            // { header: " Id", width: 10, dataIndex: 'us_id'},
            {
                header       : "Schlussel",
                width        : 100,
                dataIndex    : 'se_pkey',
                renderer     : showUpdated
            },{

        
// showUpdated is checking if field modified in record.data (not a column) has
// been set to '1'. Updated in f.e. PHP and is adding a class over it's meta.css
// to this cell        
        
        function showUpdated (val, meta, record, rowIndex, colIndex, store) {

            if (record.data.modified == '1') {
                meta.css += ' y-grid3-updated-cell';
            }
            return val;
        }
        
        
// css styles (custom), the image is a "green" version of the image dirty.gif from the images directory of Extjs (3.2)
// modified with a Photo modification software.


   /* updated cells */
   .y-grid3-updated-cell {
      background: transparent no-repeat 0 0;
   }

   .y-grid3-updated-cell {
      background-image:url(../img/updated.gif);
   }

Initial URL

Initial Description

Initial Title

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

Initial Tags

Initial Language

JavaScript

Choose a language for easy browsing: