[CLOSED] GetRowClass and Selection

[ptrourke]

I have a GridPanel with the following selection model and View:

<SelectionModel>
  <ext:RowSelectionModel ID="TypeSelectionModel" runat="server" Mode="Multi">
    <Listeners>
      <SelectionChange Fn="TypeSelector.SelectionChange" />
    </Listeners>
  </ext:RowSelectionModel>
</SelectionModel>
<View>
  <ext:GridView runat="server" LoadingText="Loading type data" StripeRows="true" TrackOver="true">
    <GetRowClass Fn="getRowClass" />
  </ext:GridView>
</View>

TypeSelector.SelectionChange does not change the CSS class of the row.

Before I added the "GetRowClass" item to the GridView, all selected rows changed color.

getRowClass changes the background color of a row to yellow if it hasn't been updated (if it is marked "not updated").

var getRowClass = function(record) {
  var notUpdated = record.get('NotUpdated");
  if (notUpdated) {return "not-updated";}
}

Now, those rows that have a background color of yellow are not highlighted in any way if they are selected. Is there something I can add to the GridView to ensure that selected rows are highlighted a different shade of yellow from unhighlighted rows?

{Edit}

Looking at it carefully, I get that it has something to do with the CSS .x- class selectors, e.g.,

.x-grid-row-selected

So, assuming that I am adding a class name

.not-updated

in my getRowClass function if the NotUpdated field value is true, and that I have added the class

.not-updated .x-grid-cell, .not-updated .x-grid-rowwrap-div 
{
   background-color: #FFFDD8 !important;
}

to my style sheet, what class selectors would I need to add background-color styling information to for selected rows and hovered rows in a gridpanel?

Thanks!

PTR

[ptrourke]

With some guidance from Chris (including a pointer to one of his Ext.NET 1.0 forum postings), a little work with the "Inspect Element" feature in the Chrome debugger, and a little remedial reading on CSS class selectors, I figured this out:

.not-updated .x-grid-cell, .is-updated .x-grid-rowwrap.div
{ background-color: #FFFDD8 !important;} 

.not-updated.x-grid-row-selected .x-grid-cell
{ background-color: #FFFDD8 !important;} 

.not-updated.x-grid-row-over .x-grid-cell
{ background-color: #D8FFFD !important;}

The key is to make sure that two classes that are assigned to the same element do NOT have a space between them -

.not-updated.x-grid-row-selected

, NOT

.not-updated .x-grid-row-selected

. Need to update my CSS skills some more.

Thanks, please mark CLOSED.