1. #1
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    289
    Vote Rating
    0
    jheid is on a distinguished road

      0  

    Default GridView.getRowClass doesn't work with locked columns in 1.0.1

    GridView.getRowClass doesn't work with locked columns in 1.0.1


    Hi.

    I have overwritten the function getRowClass() in ext.grid.GridView which delivers a CSS class with a colored background. This works great except in the case that a column is locked. In that case the background wasn't changed by my class.

    I used the following CSS in Firefox

    PHP Code:
       .x-grid-selected-row {
          
    background-color#bdc6e5  !important;
          



    JOERN

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Why is this in the bugs forum? Is the class applied to the row? I would imagine that it is, so it does indeed work as expected.

    What you need to do is inspect the element with firebug and see where the background colors are coming from and add your CSS to change those colors.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

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

      0  

    Default


    jheid. If you look at the HTML structure of a Grid with locked columns using Firebug, you'll see that locked columns are actually stored in a seperate table to the regular columns.

    So styles applied to the regular Grid will not apply to the locked columns. The locked area is visually different from the unlocked area so that it's obvious to the user what is happening.

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    289
    Vote Rating
    0
    jheid is on a distinguished road

      0  

    Default


    Quote Originally Posted by jack.slocum View Post
    Why is this in the bugs forum? Is the class applied to the row? I would imagine that it is, so it does indeed work as expected.

    What you need to do is inspect the element with firebug and see where the background colors are coming from and add your CSS to change those colors.
    Why it is a bug for me? Well, for me it's a bug if something doesn't work as documented in the doc: "Override this function to apply custom css classes to rows during rendering"

    Okay. In my example this isn't the result I should get, shouldn't I?

    PHP Code:
    new Grid (x, {
       
    view: new Ext.grid.GridView ({
                                      
    getRowClass : function (recordindex) {
                                             return 
    'x-grid-selected-row';
                                          }
                                      })
      }); 
    I've inspected the DOM (thanks for the hint, Jack) and the only difference is the "x-grid-locked" class. Everything else (the CSS classes) are the same as the other row.

    So, here's the problem:

    PHP Code:
    .x-grid-locked .x-grid-body td {
        
    background#FBFDFF;
        
    border-right1px solid #deecfd;
        
    border-bottom1px solid #deecfd !important;
    }
    .
    x-grid-locked .x-grid-row-alt td{
        
    background#F5FAFE;

    As you can see, the background color is assigned to the column (td), which can't be overwritten. I've eliminated the last "td" token and it seems like this won't change the normal design but let's you overwrite the row class, too.

    JOERN

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Why it is a bug for me? Well, for me it's a bug if something doesn't work as documented in the doc: "Override this function to apply custom css classes to rows during rendering"

    That's why I asked, is the class on the row? If the class is applied to the row, then it's not broken, it's working perfectly. It's called getRowClass not getRowBackgroundColor.

    Applying a class with a background color doesn't guarantee the background color will show through on the cells if the cells have their own background color. However, by applying the class you can use CSS to change the background color of cells as well.

    Code:
    .your-row-class td {
        background: yellow !important;
    }
    If you don't want to use !important you can use a rule with a higher specificity (e.g. an id selector).
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    289
    Vote Rating
    0
    jheid is on a distinguished road

      0  

    Default


    Quote Originally Posted by jack.slocum View Post
    Why it is a bug for me? Well, for me it's a bug if something doesn't work as documented in the doc: "Override this function to apply custom css classes to rows during rendering"

    That's why I asked, is the class on the row? If the class is applied to the row, then it's not broken, it's working perfectly. It's called getRowClass not getRowBackgroundColor.

    Applying a class with a background color doesn't guarantee the background color will show through on the cells if the cells have their own background color. However, by applying the class you can use CSS to change the background color of cells as well.

    Code:
    .your-row-class td {
        background: yellow !important;
    }
    If you don't want to use !important you can use a rule with a higher specificity (e.g. an id selector).
    Okay, thanks, that's a much better solution.

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi