JavaScript Extjs：根据其他字段的条件，使用自定义类渲染网格中的单元格

Posted 2021-05-20

// 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);
   }