PDA

View Full Version : 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.




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
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/styling-extjs-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 :


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



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



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

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


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

mysticav
8 Oct 2013, 12:27 PM
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 ?

skirtle
8 Oct 2013, 9:19 PM
http://www.sencha.com/forum/showthread.php?147073#post1002058