Results 1 to 8 of 8

Thread: hover effect - gridView

  1. #1

    Default hover effect - gridView

    Hi there,

    I have a grid that looks like this

    Code:
    grid = new Ext.grid.GridPanel({
      store: store,
      columns: [
        {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
        {header: 'Price', width: 75, sortable: true, dataIndex: 'price'}
      ],
      view: new Ext.grid.GridView({
        getRowClass : function(record, index, rp, ds){
           if(record.get('price')<50)
             return 't1';
           else 
             return 't2';
        }
      })
    });
    css:
    Code:
    .t1
    {
        background:#f7f7f7;
    }
    .t1:hover
    {
        background:#99f;
    }
    
    .t2
    {
        background:#9ff;
    }
    
    .t2:hover
    {
        background:#000;
    }
    with the gridview I was able to color the rows depending on the price - however the hover effect I wrote for those classes won't work - it seems like the default-hover is used

    does anybody have an idea?

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Disable the default row over with trackMouseOver:false.

  3. #3

    Default

    now there is no hover effect at all
    is it enough just to write t1:hover? or do I have to write a hover-effect a different way?

    i also tried

    Code:
    getRowClass : function(record, index, rp, ds){
      if(record.get('price')<50)
        return 't1 t1:hover';
      else 
         return 't2 t2:hover';

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Set trackMouseOver:true again and try:
    Code:
    .t1 {
        background:#f7f7f7;
    }
    .t1.x-grid3-row-over {
        background:#99f;
    }
    .t2 {
        background:#9ff;
    }
    .t2.x-grid3-row-over {
        background:#000;
    }
    (but combined class selectors don't work very well in IE6/7)

  5. #5

    Default

    thanks a lot... works like a charm

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    And you don't care about IE6/7?

  7. #7

    Default

    oh ok now i got you... but what would be the workaround?

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    It's ugly, but I'm using:
    Code:
    viewConfig: {
        templates: {
            row: new Ext.Template(
                '<div class="x-grid3-row {alt}" style="{tstyle}"><table class="x-grid3-row-table {status}" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
                '<tbody><tr>{cells}</tr></tbody></table></div>'
            )
        },
        getRowClass: function(r, rowIndex, rp){
            rp.status = r.get('price') < 50 ? 't1' : 't2';
         }
    }
    with:
    Code:
    .t1 {
        background:#f7f7f7;
    }
    .x-grid3-row-over .t1 {
        background:#99f;
    }
    .t2 {
        background:#9ff;
    }
    .x-grid3-row-over .t2 {
        background:#000;
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •