Grid row color with getRowClass is not working

**pbaccari** · 16 Jan 2013 2:22 AM

Hi,

Grid row color with getRowClass of viewConfig is not working (works for the text color but not background-color).
Is this the right way with Ext-JS 4?

I made an example from the example of ExtJS grid array (see attachment).

Best regards.

Code:

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*']);

// Define Company entity
// Null out built in convert functions for performance *because the raw data is known to be valid*
// Specifying defaultValue as undefined will also save code. *As long as there will always be values in the data, or the app tolerates undefined field values*
Ext.define('Company', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'company'
    }, {
        name: 'price',
        type: 'float',
        convert: null,
        defaultValue: undefined
    }, {
        name: 'change',
        type: 'float',
        convert: null,
        defaultValue: undefined
    }, {
        name: 'pctChange',
        type: 'float',
        convert: null,
        defaultValue: undefined
    }, {
        name: 'lastChange',
        type: 'date',
        dateFormat: 'n/j h:ia',
        defaultValue: undefined
    }],
    idProperty: 'company'
});

Ext.onReady(function () {
    Ext.QuickTips.init();

    // setup the state provider, all state information will be saved to a cookie
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

    // sample static data for the store
    var myData = [
        ['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'],
        ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
        ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
        ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
        ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
        ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
        ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
        ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
        ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
        ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
        ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
        ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
        ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
        ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
        ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
        ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
        ['United Technologies Corporation', 63.26, 0.55, 0.88, '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']
    ];

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function change(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function pctChange(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '%</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        model: 'Company',
        data: myData
    });

    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        stateful: true,
        collapsible: true,
        multiSelect: true,
        stateId: 'stateGrid',
        columns: [{
            text: 'Company',
            flex: 1,
            sortable: false,
            dataIndex: 'company'
        }, {
            text: 'Price',
            width: 75,
            sortable: true,
            renderer: 'usMoney',
            dataIndex: 'price'
        }, {
            text: 'Change',
            width: 75,
            sortable: true,
            renderer: change,
            dataIndex: 'change'
        }, {
            text: '% Change',
            width: 75,
            sortable: true,
            renderer: pctChange,
            dataIndex: 'pctChange'
        }, {
            text: 'Last Updated',
            width: 85,
            sortable: true,
            renderer: Ext.util.Format.dateRenderer('m/d/Y'),
            dataIndex: 'lastChange'
        }, {
            menuDisabled: true,
            sortable: false,
            xtype: 'actioncolumn',
            width: 50,
            items: [{
                icon: '../shared/icons/fam/delete.gif', // Use a URL in the icon config
                tooltip: 'Sell stock',
                handler: function (grid, rowIndex, colIndex) {
                    var rec = store.getAt(rowIndex);
                    alert("Sell " + rec.get('company'));
                }
            }, {
                getClass: function (v, meta, rec) { // Or return a class from a function
                    if (rec.get('change') < 0) {
                        return 'alert-col';
                    } else {
                        return 'buy-col';
                    }
                },
                getTip: function (v, meta, rec) {
                    if (rec.get('change') < 0) {
                        return 'Hold stock';
                    } else {
                        return 'Buy stock';
                    }
                },
                handler: function (grid, rowIndex, colIndex) {
                    var rec = store.getAt(rowIndex);
                    alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
                }
            }]
        }],
        height: 350,
        width: 600,
        title: 'Array Grid',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true,
            enableTextSelection: true,

            // *******************************************
            // Added :
            getRowClass: function (row, index) {
                var cls = "";

                if (row.get("change") < 0) {
                    cls = "grid-background-red"; // assign css class in some condition!
                }

                return cls;
            }
            // *******************************************
        }
    });
});

pbaccari

OK it's working :
With Ext 3 we should use only :

Code:

.child-row {
    background-color: #ffe2e2;
    color: #900; 
}

With Ext 4, we need to put ".x-grid-cell" after our css class :

Code:

.child-row .x-grid-cell {
    background-color: #ffe2e2;
    color: #900; 
} 
 
.adult-row .x-grid-cell { 
    background-color: # e2ffe2;
    color: #090; 
}

JS code :

Code:

Ext.create('Ext.grid.Panel', {
    ...
    viewConfig: {
        stripeRows: false,
        getRowClass: function (record) {
            return record.get('age') < 18 ? 'child-row' : 'adult-row';
        }
    }
});

Thank you very much.

**pbaccari** · 16 Jan 2013 2:37 AM

the attachment file

**skirtle** · 16 Jan 2013 2:38 AM

I've moved your thread as it doesn't appear to relate to beta testing.

For setting the background-color of a row see here:

http://skirtlesden.com/articles/styl...tjs-grid-cells

You need to point the selector at the td, not the tr.

**pbaccari** · 22 Jan 2013 7:49 AM

Hi,

but I want to change the color of a row dependent on the data for that row, as indicated in the paragraph of your link:

"Styling Rows

In many cases the styling for a row is dependent on the data for that row. That data is represented by a record in the store. We can add a CSS class to the <tr> element based on the record using the config option getRowClass"

But it's not working with Ext 4.2. It worked with Ext 3.3

Best regards.

**skirtle** · 22 Jan 2013 7:54 AM

Could you post the CSS you're using?

**pbaccari** · 22 Jan 2013 8:03 AM

OK it's working :
With Ext 3 we should use only :

Code:

.child-row {
    background-color: #ffe2e2;
    color: #900; 
}

With Ext 4, we need to put ".x-grid-cell" after our css class :

Code:

.child-row .x-grid-cell {
    background-color: #ffe2e2;
    color: #900; 
} 
 
.adult-row .x-grid-cell { 
    background-color: # e2ffe2;
    color: #090; 
}

JS code :

Code:

Ext.create('Ext.grid.Panel', {
    ...
    viewConfig: {
        stripeRows: false,
        getRowClass: function (record) {
            return record.get('age') < 18 ? 'child-row' : 'adult-row';
        }
    }
});

Thank you very much.

Grid row color with getRowClass is not working

Thread Tools

Search Thread

Display

Answered: Grid row color with getRowClass is not working

Answered: Grid row color with getRowClass is not working

the attachment file

the attachment file