Change the color of Ext. Grid. gridpanel.

Sometimes we need to change the grid data to a special color based on a tag in the store. For example, in my project, the record with abnormal user status (the Field memberstatus is not 1) is dimmed. 'X-grid-record-gray'
It is a CSS style that has been defined on the page. The viewconfig information in the grid is truncated below.

Viewconfig :{
Columnstext: "show/hide columns ",
Sortasctext: "Forward order ",
Sortdesctext: "Inverted sorting ",
Forcefit: True,
Getrowclass: function (record, rowindex, rowparams, store ){
// Disable the Gray Display of data
If (record. Data. memberstatus! = '1') {// The user status is abnormal.
Return 'x-grid-record-gray ';
Ext. getcmp ("membergrid"). getselectionmodel (). Lock ();
} Else {
Return '';
}

}

 

 

Ext. Grid. gridpanel: font changes when the mouse slides over a row

When you write a CSS class in the margin book, you can overwrite the class in the original ext-all.css to move the mouse over the gridpanel and change the font.

CSS code

1. /* Style rows on Mouseover */
   
2. X-grid3-row-over. x-grid3-cell-inner {
3. Font-weight: bold;
4. Color: '# 545bed'
   
   
5. }