Geek Answers Handbook

Changing the background color of grid lines dynamically in extjs 4.2.2

I have my grid that loads a list of data, and some data should change the background value to a specific date value. If the date is less than today's date, it should use the css class 'now', otherwise 'later'. It works fine, but my problem is that only one line changes the background color, so it does not go through the whole list.

heres my grid:

grid = Ext.create('Ext.grid.Panel', { store: store, xtype: 'gridpanel', columns: [ { text: 'Name', dataIndex: 'name', tdCls: 'x-grid-cell' } ], stripeRows: false, viewConfig: { getRowClass: function(record, index) { var date = Ext.Date.parse(record.get('reminderDate'),"c").valueOf(); var today = Ext.Date.parse(Ext.Date.format(new Date(), 'Ym-d'), "c").valueOf(); return today < date ? 'later' : 'now' } }, renderTo: Ext.getBody() });

edit:

The backgroudn colors change only in the top line of the grid, the rest remain unchanged. however getrowclass calls each line.

CSS

 .later .x-grid-cell { background-color: #FFB0C4; } .now .x-grid-cell { background-color: #5491BD; }
+6
source share
2 answers

Found out what the problem is.

Since I am using a theme, I had to put a custom CSS file in front of the standard ExtJS CSS with the "! Important" flag.

New css file:

 .later .x-grid-cell { background-color: #FFB0C4 !important; } .now .x-grid-cell { background-color: #5491BD !important; }
+4
source

Recently, but, note, in ExtJs 6.6.0, if you want to keep the background colors of hovering and highlighting, see the following sencha fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2p5c .

Here is the code:

 Ext.application({ name: 'Fiddle', launch: function () { Ext.create('Ext.data.Store', { storeId: 'simpsonsStore', fields: ['name', 'email', 'phone'], data: [{ name: 'Lisa', email: ' lisa@simpsons.com ', phone: '555-111-1224' }, { name: 'Bart', email: ' bart@simpsons.com ', phone: '555-222-1234' }, { name: 'Homer', email: ' homer@simpsons.com ', phone: '555-222-1244' }, { name: 'Marge', email: ' marge@simpsons.com ', phone: '555-222-1254' }] }); Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: Ext.data.StoreManager.lookup('simpsonsStore'), columns: [{ text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone' }], height: 200, width: 400, renderTo: Ext.getBody(), viewConfig: { getRowClass: function (record, rowIndex, rowParams, store) { // console.log(record); // if (this.isSelected(record)) // return ''; return (record.get('name') == 'Lisa') ? 'redBackground' : ''; } }, // features: [{ // ftype: 'rowbody', // getAdditionalData: function (data, idx, record, orig) { // // Use the data/record to determine which class to apply, then // // style the row body in CSS. // // console.log(data); // // console.log(record); // console.log(orig); // // if (data.name == 'Lisa') // // return { // // rowBodyCls: "redBackground" // // }; // return orig; // } // }] }); } });

Style:

 .x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-over) .redBackground .x-grid-cell { background-color: #ffe6e6; }
0
source

More articles:


All Articles