1. #1
    Ext GWT Premium Member
    Join Date
    Jan 2011
    Posts
    4
    Vote Rating
    0
    exeura is on a distinguished road

      0  

    Default Inner grid elements not showing their full content

    Inner grid elements not showing their full content


    Hi,
    I've a problem with inner elements of a grid not showing their full content, possibly due to computed sizes beyond screen bounds.

    Here's my setup: I have a grid with two columns. In the second column I added a Renderer which gives a vertical panel.
    The latter has three rows: the name of my bean, a summary and another panel containing a list of links.
    The first two are GXT HTML objects, whereas the list of links is implemented as an HorizontalPanel containing
    Anchors and separators.

    I expected that summary and list of links wrapped around cell boundary, showing two or more lines of text per cell,
    as needed.
    [see "not wrapped summary.png" inside attached zip file, Screenshots directory]

    However, both components are *clipped*, i.e., text stops at right end. In fact, I inspected DOM with FireBug
    on Firefox, thus discovering that one of the tables inside a div has an impossibile size (2500+ pixels,
    i.e., roughly my screen width doubled), much larger than their parent div tag.
    [see "outermost overflowing cell.png", "the last element having good width.png" inside zip file]

    Is this problem related to generated CSS classes' (x-auto-nnn, etc.) properties?

    I attached a sample code which demonstrates this issue in isolation, without any links to the actual environment.
    I'm using GXT 2.2.1 and GWT 2.1.1; I've not attached those jars in order to reduce zip file size.

    Could you help me?

    Thank you
    Attached Files

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Nov 2010
    Posts
    209
    Vote Rating
    -2
    Ersmarker has a little shameless behaviour in the past

      0  

    Default


    Hi.

    There are a few things that I would change in the setup.
    Use a ContentPanel with a Rowlayout instead of VerticalPanel. It has a smaller HTML footprint and a more flexible layout.
    When adding to the RowLayout, use RowData(1,-1). 1 uses the full available width and -1 uses the "real" height.
    You need to change the "white-space" style from "nowrap" to "normal" to make the text wrap to new lines.

    The following modifications of the test-case will get you the desired behavior.

    Code:
    public class MyVerticalPanel extends ContentPanel  { 
    private final MyBean bean; 
    
    public MyVerticalPanel(final MyBean bean) 
    { 
    this.setHeaderVisible(false); 
    this.bean = bean; 
    this.setLayout(new RowLayout(Orientation.VERTICAL)); 
    add(new Html(bean.getName()),new RowData(1, -1)); 
    Html h = new Html(bean.getSummary()); 
    h.setStyleAttribute("white-space", "normal"); 
    add(h,new RowData(1, -1)); 
    
    
    final LayoutContainer linksPanel = new LayoutContainer(); 
    final List<String> links = bean.getLinks(); 
    for (final String link : links) 
    { 
    linksPanel.add(new Anchor(link + " ")); 
    } 
    
    add(linksPanel,new RowData(1, -1)); 
    } 
    }

  3. #3
    Ext GWT Premium Member
    Join Date
    Jan 2011
    Posts
    4
    Vote Rating
    0
    exeura is on a distinguished road

      0  

    Default


    Hi,
    thanks for your answer. I used the code you suggested. It works as concern the summary creation but it doesn't solve the problem of the links partitioning on more lines. I'm referring to the following code:

    Code:
    final LayoutContainer linksPanel = new LayoutContainer(); 
    final List<String> links = bean.getLinks(); 
    for (final String link : links) 
    { 
    linksPanel.add(new Anchor(link + " ")); 
    } 
    
    add(linksPanel,new RowData(1, -1)); 
    }
    I tried to substitute the LayoutContainer with a ContentPanel having a RowLayout(Orientation.HORIZONTAL) but also this attempt failed: links are contained on a single row and some of them are not visible.

    Any other suggestion?

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Nov 2010
    Posts
    209
    Vote Rating
    -2
    Ersmarker has a little shameless behaviour in the past

      0  

    Default


    Setting white-space attribute to normal should do the trick.

    Code:
       linksPanel.setStyleAttribute("white-space", "normal");

Similar Threads

  1. Ext Menu example showing full list briefly
    By HappyPike in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 4 Feb 2011, 2:20 PM
  2. Content Won't Scroll Full Length on Ajax Update
    By uxdan in forum Sencha Touch 1.x: Discussion
    Replies: 9
    Last Post: 13 Jul 2010, 4:58 AM
  3. showing full contents of a combo box
    By dlstrawn in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 4 May 2010, 4:57 AM
  4. grid not showing all of row's content in Firefox
    By rballman in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 6 Jan 2009, 10:22 AM

Thread Participants: 1

Tags for this Thread