coloring grouping grid header

Dear experts

I am using ext-js 4.2
I have a grouping grid like shown in the attached image.
I am trying to color the grouping header row with label  Group:Basketball  with green background.
my grouping grid

For this in my view i am doing

features: [
                                      ftype: 'grouping',
                                       groupHeaderTpl: [
                                           '{name} ({[values.children.length]})'
                                       hideGroupedHeader: false,
                                       startCollapsed: false
                              viewConfig: {
                                    getRowClass: function(record, index) {
                                          //set appropriate css
                                          if ( == 'Abe'){
                                                return 'newLineItemGrp';  

And this is my css entry

.newLineItemGrp .x-grid-group-hd {  
    background-color: #D0F5A9;    //green    

 But it doesnt seem to work, any idea where i am doing wrong.
Any help will be appreciated.
Who is Participating?
Kyle HamiltonData ScientistCommented:
what is the generated html?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Can you provide a link to your test page?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.