Results 1 to 6 of 6

Thread: extjs 6.0.2 grid rows with variable height

  1. #1
    Sencha User mcelotti's Avatar
    Join Date
    Nov 2013
    Posts
    82
    Answers
    1

    Default extjs 6.0.2 grid rows with variable height

    Hi,
    I have a grid with several columns/rows and some cells contain variable text (from 0 to 100 characters).
    If I set the property "itemHeight" rows have all the same height but long text is cut off.
    If I don't set the property most of the rows get a weird height (I think based on the row with the greatest height) and also scrolling is broken (last rows are not visible).
    Is there a way to have rows with variable height?

    Thanks,
    Marco

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    I tried throwing this test case together:
    https://fiddle.sencha.com/#fiddle/1ht6

    I'm not seeing the same results. Are you wanting long text to wrap?

  3. #3
    Sencha User mcelotti's Avatar
    Join Date
    Nov 2013
    Posts
    82
    Answers
    1

    Default

    Hi Gary, no I would like to show all the text without ellipsis and to do so I've overridden the "x-grid-cell-inner" CSS rule from "white-space: nowrap;" to "white-space: normal;".
    I was able to do the same with your fiddle, I attach the screenshot:

    Screenshot - 05102016 - 09:52:59.jpg

    Thanks for the help,
    Marco

  4. #4
    Sencha User mcelotti's Avatar
    Join Date
    Nov 2013
    Posts
    82
    Answers
    1

    Default

    Hey Gary, did you see the problem? Is there a workaround to get full cell content and variable rows height?

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    I'm able to recreate the results you described using the following:
    Code:
    .x-gridcell .x-inner-el { 
        white-space:normal;
    }
    Unfortunately, while this does expand the cell size, it does not expand the row height, as you've no doubt also found to be the case. Perhaps you could calculate and set the row height for each row?

  6. #6
    Sencha User mcelotti's Avatar
    Join Date
    Nov 2013
    Posts
    82
    Answers
    1

    Default

    Well, calculating the height of each row looks like a weak solution since it depends on cell dimension and cell dimension depends on display size.
    Right now I'm using "infinite: false" in grid config and ".x-grid-row {position: inherit;}" in CSS and it's working as expected.
    With this solution there's a new issue with the PagingToolbar plugin of the grid, but I've found a workaround for that too.
    It feels a bit like a hack so if you have any advice let me know!

    PS: I've also tried to use the "variableHeights" config of the grid but with no luck.

    Thank you Gary for the help,
    Marco

Similar Threads

  1. Replies: 2
    Last Post: 20 Feb 2018, 10:42 PM
  2. Replies: 1
    Last Post: 28 Jul 2015, 6:27 AM
  3. Replies: 3
    Last Post: 10 Apr 2014, 5:42 AM
  4. variable height grid rows
    By ojosilva in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 19 Sep 2010, 2:03 AM

Posting Permissions

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