Results 1 to 4 of 4

Thread: ExtJS grid selection highlighting colr issue

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    Pune, India
    Posts
    78
    Answers
    5
    Vote Rating
    0
      0  

    Default 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
      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
      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
      0  

    Default

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

Posting Permissions

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