PDA

View Full Version : How to style a grid after refreshing it?



IAmAndre
18 May 2014, 2:50 PM
Hi,

I'm using the following code to style a grid based on its content :



viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){
switch(record.get('status')){
case 'PENDING':
return 'row-yellow';
case 'REJECTED':
return 'row-red';
}
}
},


The problem is that I can't call this method when I refresh the grid. I tried the following but it doesn't work.


var store = grid.getStore();
var i = 0, record = '';
while(record = store.getAt(i)){
grid.viewConfig.getRowClass(record,i,{},store);
i++;
}

How can I fix this?
Thanks

IAmAndre
18 May 2014, 4:23 PM
So here is what I did. I'm sure there are better solutions, but this one works.


var store = grid.getStore();
var nodes = grid.getView().getNodes(), status='';

for(var i = 0; i<nodes.length;i++){ // Looping through the rows
status = nodes[i].cells[5].children.item(0).innerHTML; // Getting the content of the cell on which the styling should be based
if(status == 'REJECTED'){
nodes[i].classList.add('row-red');
}
if(status == 'PENDING'){
nodes[i].classList.add('row-yellow');
}
}

Hope this will help someone.

jsakalos
18 May 2014, 10:03 PM
This sounds strange. I've been using getRowClass for years and it always worked as expected. What exactly do you mean by
after refreshing it?

See also this example (http://extjs.eu/examples/#grid-styling-rows) - after you set a row color then you can sort and the styling stays. Sorting runs view refresh.

IAmAndre
18 May 2014, 11:23 PM
By "refreshing", I mean using the "reconfigure" method as follows :


grid.reconfigure(cases_store);

Apparently the function wasn't called so the classes weren't added.

jsakalos
19 May 2014, 12:49 AM
If getRowClass() stops working after reconfigure, I suspect it is a bug in Ext. Can you prepare a showcase so that we can verify and fix it?

IAmAndre
19 May 2014, 1:17 AM
What do you mean by "showcase"?

jsakalos
19 May 2014, 1:27 AM
A code that we can run locally or at https://fiddle.sencha.com that demonstrates the issue.