1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    10
    Vote Rating
    0
    mariusz.saternus@markit.com is on a distinguished road

      0  

    Default Unanswered: Auto height grid

    Unanswered: Auto height grid


    Hi,

    I'm trying to recreate the 'auto-height' functionality from http://www.sencha.com/examples-2/#autoheightgrid in GXT3. Can anyone please point me in the right direction in terms of getting the size of the grid body component (so that I essentially have the combined height of all rows that exist in a given grid component).

    Thanks,
    Mariusz

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    The same basic idea works well in GXT 3 - I have a demo put together but not yet published that is using the same sort of code from the GXT 2 auto-height grid example, and it seems to work well.

    Have you tried to use the same code, i.e. creating a doAutoHeight function that resizes the grid based on the contents, and calling it when various events (cases where the grid's size may have changed) go off?

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    10
    Vote Rating
    0
    mariusz.saternus@markit.com is on a distinguished road

      0  

    Default


    That is what I tried to do but the main issue is working out the height of the body of the grid. Doing grid.getView().getBody().getFirstChild() doens't get me anywhere as there is no way to query the node returned for height.

    Don't suppose you could share your demo code?

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Here is my doAutoHeight() method - I'm doing grid.getView().getBody().getFirstChildElement().getOffsetHeight() and it seems to be working fine - can you clarify what you mean by "there is no way to query the node returned for height"?

    Code:
      protected void doAutoHeight() {
        if (grid.isViewReady()) {
          // First, this implementation never shows horizontal scrollbars - other implementations might only grow to a
          // certain point
          grid.getView().getScroller().getStyle().setProperty("overflowY", "hidden");
    
          // Next, find out how tall we need to be - if there is a vertical scrollbar, factor that in
          int scrollbar = (grid.getView().getBody().isScrollableX() ? XDOM.getScrollBarWidth() : 0);
          int gridFraming = grid.getElement().getFrameWidth(Side.TOP, Side.BOTTOM);
          int gridHeader = grid.getView().getHeader().getOffsetHeight();
          int gridContents = grid.getView().getBody().getFirstChildElement().getOffsetHeight();
    
          // If we were just sizing the grid itself, that would be enough to compute its height. However, we want to size
          // the ContentPanel that wraps it, so we need to compute the header/footer heights as well
          // grid.setHeight(scrollbar + gridFraming + gridHeader + gridContents);
          int panelFraming = panel.getElement().getOffsetHeight() - grid.getElement().getOffsetHeight();
    
          panel.setHeight(panelFraming + scrollbar + gridFraming + gridHeader + gridContents);
        }
      }
    Only roughly tested, not guaranteed to work with all GXT versions, and specific to the gxt 2.x sample with a containing panel. The comments should make it clear what each arg is for so that you can make it work in your specific use case.

  5. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    10
    Vote Rating
    0
    mariusz.saternus@markit.com is on a distinguished road

      0  

    Default


    Colin, thanks for the sample code. I got my code to work. This is my first attempt to work with GXT3 having moved from 2.2.5. The issue I had was that my code was using a live view and in that case grid.getView().getBody().getFirstChildElement().getOffsetHeight() was always returning the same value - regardless of how many elements I had in the grid (my data was loaded dynamically). Thanks again

  6. #6
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Live grid doesn't make sense with autoheight - live grid means "I only want you to even load some of my items at a time, and display fewer of them, use the scrollbar to make it look like I have all of them", while autoheight means "always render every single item at once". It doesn't make sense to do both at once.

Thread Participants: 1

Tags for this Thread