Results 1 to 8 of 8

Thread: Grid row color with getRowClass is not working

  1. #1
    Sencha Premium User
    Join Date
    Jun 2007
    Location
    France
    Posts
    56
    Answers
    3

    Default Answered: Grid row color with getRowClass is not working

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

  2. 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.

  3. #2
    Sencha Premium User
    Join Date
    Jun 2007
    Location
    France
    Posts
    56
    Answers
    3

    Default the attachment file

    the attachment file
    Attached Files Attached Files

  4. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    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.

  5. #4
    Sencha Premium User
    Join Date
    Jun 2007
    Location
    France
    Posts
    56
    Answers
    3

    Default

    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.

  6. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Could you post the CSS you're using?

  7. #6
    Sencha Premium User
    Join Date
    Jun 2007
    Location
    France
    Posts
    56
    Answers
    3

    Default

    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.

  8. #7
    Sencha User mysticav's Avatar
    Join Date
    Mar 2007
    Location
    Mexico
    Posts
    531
    Answers
    4

    Default

    I have a problem.

    Once the row is colored with my own CSS class, the selection color stops working, that means, the row background color does not changed when I select the row.

    What should I do ?

  9. #8

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •