how can i make it from span to row in grid(EXTJS)?

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

---

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.

---

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.