如何在网格（EXTJS）中从跨行到行？

Question

The below code does the colour change of the text in the cell.how can it be applied to apply entire row background colour ????

function dataindex(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

Answer 1

You can customize the appearance of grid rows by overriding the getRowClass method of GridView (see Ext JS API ).

Quoted example from API documentation - see how getRowClass returns a different css class depending on the condition:

viewConfig: {
    forceFit: true,
    showPreview: true, // custom property
    enableRowBody: true, // required to create a second, full-width row to show expanded Record data
    getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
        if(this.showPreview){
            rp.body = '<p>'+record.data.excerpt+'</p>';
            return 'x-grid3-row-expanded';
        }
        return 'x-grid3-row-collapsed';
    }
},

After overriding the method, you just need to set up the css definitions with whatever background colors etc. that you wish.

Answer 2

Like Tommi said, getRowClass is what you want to use. If you really want to set the color explicitly, you can append styles to rowParams.tstyle :

viewConfig: {
    getRowClass: function(record, rowIndex, rowParams, store) {
        rowParams.tstyle += "color: green;";
    }
},

But usually it's better to simply return a class name from getRowClass and define the exact colors in CSS file.