1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    Pune, India
    Posts
    78
    Answers
    5
    Vote Rating
    0
    Pravin.Pawar is on a distinguished road

      0  

    Default Unanswered: ExtJS grid selection highlighting colr issue

    Unanswered: ExtJS grid selection highlighting colr issue


    hi,

    I'm changing cell colors of the ExtJS grid using css on grid column render event in ExtJS 4.1 somehow the row selection css (cls: 'custom-grid') gets override and grid row selction highlight do NOT work as expected.

    grid = Ext.create('Ext.grid.Panel', {
    store: store,
    stateful: true,
    cls: 'custom-grid',
    -------------
    -------------
    -------------
    renderer: function (data, metadata, record, rowIndex) {
    if (data.length > 10) {
    metadata.style = "background-color:orange;";
    }
    return '<span onmouseover="this.style.cursor=\'hand\';">' + data + '</span>';
    }

    please let me know how can i resolve this issue.
    Thanks, Pravin

  2. #2
    Sencha User
    Join Date
    Aug 2012
    Location
    Pune, India
    Posts
    78
    Answers
    5
    Vote Rating
    0
    Pravin.Pawar is on a distinguished road

      0  

    Default


    I have applied cls: 'custom-grid' to ExtJS grid somehow when I applied custom formatting to individual cells of the grid then grid row selection CSS is NOT working. I want to highlight grid row with Dark Gray color. In that row; there might be few cells which are highlighted in different color and that needs to override with grid row selection colr on mouse hover.
    DateView.jpg
    Thanks, Pravin

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Location
    Pune, India
    Posts
    78
    Answers
    5
    Vote Rating
    0
    Pravin.Pawar is on a distinguished road

      0  

    Default


    I want to apply following css on mouse cursor over the row and selected row-


    /* Grid cells when the mouse cursor is over the row */
    .custom-grid .x-grid-row-over .x-grid-cell {
    background-color: #ff6;
    border-bottom-color: #999;
    border-bottom-style: dashed;
    border-top-color: #999;
    border-top-style: dashed;
    }

    /* Grid cells in the selected row */
    .custom-grid .x-grid-row-selected .x-grid-cell {
    background-color: #ff0 !important;
    border-bottom-color: #999;
    border-bottom-style: solid;
    border-top-color: #999;
    border-top-style: solid;
    }
    Thanks, Pravin

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Location
    Pune, India
    Posts
    78
    Answers
    5
    Vote Rating
    0
    Pravin.Pawar is on a distinguished road

      0  

    Default


    I want to apply mouse over cell color to entire row -
    Attached Images
    Thanks, Pravin