1. #1
    Ext User
    Join Date
    May 2008
    Posts
    17
    Vote Rating
    0
    Elemental is on a distinguished road

      0  

    Default getRowClass how to change CSS

    getRowClass how to change CSS


    Hi All,

    i have been reading various posts about the getRowClass and how you use that to change the row's CSS colour.

    I am using a GridPanel and want to change the BG colour as well as the font colour of some of the rows depending on the values of the resultsets.

    But before I even test the result sets I was trying to hardcode the return value so that I could see it working as well as set an alert message to see that the code was getting fired.

    Now I have seen the code defined in 2 ways:

    Code:
    1. In the constructor: 
    
    viewConfig: {
              
                 getRowClass: function(record) {
    
                    Ext.Msg.alert('hello!');
    
                    return 'red-row';
                        
                }
             },
    Another way is:

    2.

    Code:
        grid.getView().getRowClass = function(row, index)
        {
            return 'red-row';
            Ext.Msg.alert('hello!');
        };
    So firstly which way is correct? and secondly what parameters should I be passing the function?

    Also why is the alert box never shown? Is this code being called?

    What else am I doing wrong?

    Any other assistance will be appreciated.

    thanks in advance

    Elemental

    http://www.elemental.co.za

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Either way will work.

    In the second case the alert will never be called.

    Be aware that <tr> elements do not accept styling. You must create rules which apply to the child <td> elements of a <tr> with that class.

  3. #3
    Ext User
    Join Date
    May 2008
    Posts
    17
    Vote Rating
    0
    Elemental is on a distinguished road

      0  

    Default


    Why will the alert never be called is it because its not a:

    alert('hello');

    type alert?

    I did change it to the above and its not being called and the colour of the font, etc... isnt changing.

    Any ideas?

    I am including my CSS file.

    thanks

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    To change the font you need to use a more specific css rule:
    Code:
    .red-row {background-color: red;}
    .red-row td {color: white;}

    ps. You write this:
    Code:
    return 'red-row';
    Ext.Msg.alert('hello!');
    and you actually have no idea why the alert isn't shown?

  5. #5
    Ext User
    Join Date
    May 2008
    Posts
    17
    Vote Rating
    0
    Elemental is on a distinguished road

      0  

    Default


    no its like this:

    grid.getView().getRowClass = function(row, index)
    {
    alert ('binng');
    return 'red-row';

    };

    that should be correct?

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, that should work.

    And you have to help yourself now.

    You must debug using Firebug properly. Stepping through the code as has been described to you.

  7. #7
    Sencha Premium Member
    Join Date
    Jan 2009
    Location
    India
    Posts
    57
    Vote Rating
    0
    nitingautam is on a distinguished road

      0  

    Default


    Hi,

    I am trying the same as below in grid but getting getRowClass undefined

    Code:
    listeners:{
                               rowclick:function(g,r,e){  
    
                            var row = this.getView().getRow(r);
                                                    var vw=Ext.getCmp("someGrid").getView().getRowClass
                                                    Ext.getCmp("someGrid").getView().getRowClass = function(row, index) {
                                                                                 alert(index)
                                                                                 return 'error-row';
                                                                                                    
                                                                                            };
    
                                            }
                                            }

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Configure it into the GridView!

  9. #9
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Example:
    Code:
    var grid = new Ext.grid.GridPanel({
      ...
      viewConfig: {
        ...
        getRowClass: function(record, rowIndex, rowParams, store){
          return 'error-row'; // should probably conditional
        }
      }
    });

  10. #10
    Sencha Premium Member
    Join Date
    Jan 2009
    Location
    India
    Posts
    57
    Vote Rating
    0
    nitingautam is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    Configure it into the GridView!
    I have now done the following animal.

    Code:
    var gridView = new Ext.grid.GridView({
    
                            //forceFit: true,
                               getRowClass : function (row, index) {
                                var cls = '';
                                var data = row.data;
                                switch (data.MRKD_DEL) {
                                    case 'Y' :
                                       cls = 'error-row'
                                       break;
                                }
                                return cls;
                            }
    
                    });
    and inside grid i used 'view: gridView'.

    Now what I want when I select any row (can be multiple rows) I want to change it's color instantly. and when select again that row, color should be normal again means unselect