Grid bug in IE?

[timefortea]

Hi all,
I noticed that my Grid does not display correctly in IE but displays fine in Firefox. In IE it runs on past the boundary of the enclosing panel, on the right hand side. Is this a bug? Is there a way around it?

Here's my code that should re-produce it:

public class Test implements EntryPoint 
{

    public void onModuleLoad() 
    {
        LayoutContainer container = new LayoutContainer();
        container.setLayout(new FlowLayout(10));

        List<Post> posts = new ArrayList<Post>();
        posts.add(new Post("User1", "xxx", new Date(), "Here we are"));
        posts.add(new Post("User2", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User3", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User4", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User5", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User6", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User7", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User8", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User9", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User10", "zzzzzzz", new Date(), "Hello there"));
        BasePagingLoadResult bplr = new BasePagingLoadResult<Post>(posts, 0, 10);
        MemoryProxy<BasePagingLoadResult> proxy = new MemoryProxy<BasePagingLoadResult>(bplr);

        // loader
        BasePagingLoader loader = new BasePagingLoader(proxy);
        ListStore<Post> store = new ListStore<Post>(loader);
        loader.load(0, 10);

        final PagingToolBar toolBar = new PagingToolBar(10);
        toolBar.bind(loader);

        List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
        columns.add(new ColumnConfig("forum", "Forum", 100));
        columns.add(new ColumnConfig("username", "Username", 100));
        columns.add(new ColumnConfig("subject", "Subject", 100));
        ColumnConfig date = new ColumnConfig("date", "Date", 100);
        date.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/y"));
        columns.add(date);

        ColumnModel cm = new ColumnModel(columns);

        ContentPanel gridPanel = new ContentPanel();
        gridPanel.setFrame(true);
        gridPanel.setCollapsible(false);
        gridPanel.setAnimCollapse(false);
        gridPanel.setButtonAlign(HorizontalAlignment.CENTER);
        gridPanel.setHeaderVisible(false);
        gridPanel.setLayout(new FitLayout());
        gridPanel.setBottomComponent(toolBar);


        Grid<Post> grid = new Grid<Post>(store, cm);
        grid.setLoadMask(true);
        grid.setBorders(true);
        grid.setStripeRows(true);

        gridPanel.add(grid);

        container.add(gridPanel);
        
        Viewport vp = new Viewport();
        vp.setLayout(new FitLayout());
        vp.add(container);
        RootPanel.get().add(vp);
        
    }
    
    
    public class Post extends BaseModel implements Serializable {

          protected Date dummy;
          
          public Post() {
            
          }
          
          public Post(String username, String forum, Date date, String subject)
          {
              setUsername(username);
              setForum(forum);
              setDate(date);
              setSubject(subject);
          }

          private void setUsername(String username) {
            set("username", username);
          }

          private void setForum(String forum) {
            set("forum", forum);
          }

          private void setDate(Date date) {
            set("date", date);
          }

          private void setSubject(String subject) {
            set("subject", subject);
          }

        }

}

screen1.jpg shows how this is displayed in IE (notice frame on right hand side)
screen2.jpg shows how this is displayed in Firefox (fine on right hand side)

Edit: Using GXT 1.2.1 / GWT 1.5.3 / Windows XP / IE 7 / Firefox 3

Edit 2: If I set a specific size on the 'gridPanel' panel, this goes away - but I want the panel to adjust according to the window size, I don't want to set it.

[sven]

public void onModuleLoad() {


    List<Post> posts = new ArrayList<Post>();
    posts.add(new Post("User1", "xxx", new Date(), "Here we are"));
    posts.add(new Post("User2", "zzzzzzz", new Date(), "Hello there"));
    posts.add(new Post("User3", "zzzzzzz", new Date(), "Hello there"));
    posts.add(new Post("User4", "zzzzzzz", new Date(), "Hello there"));
    posts.add(new Post("User5", "zzzzzzz", new Date(), "Hello there"));
    posts.add(new Post("User6", "zzzzzzz", new Date(), "Hello there"));
    posts.add(new Post("User7", "zzzzzzz", new Date(), "Hello there"));
    posts.add(new Post("User8", "zzzzzzz", new Date(), "Hello there"));
    posts.add(new Post("User9", "zzzzzzz", new Date(), "Hello there"));
    posts.add(new Post("User10", "zzzzzzz", new Date(), "Hello there"));
    BasePagingLoadResult bplr = new BasePagingLoadResult<Post>(posts, 0, 10);
    MemoryProxy<BasePagingLoadResult> proxy = new MemoryProxy<BasePagingLoadResult>(bplr);

    // loader
    BasePagingLoader loader = new BasePagingLoader(proxy);
    ListStore<Post> store = new ListStore<Post>(loader);
    loader.load(0, 10);

    final PagingToolBar toolBar = new PagingToolBar(10);
    toolBar.bind(loader);

    List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
    columns.add(new ColumnConfig("forum", "Forum", 100));
    columns.add(new ColumnConfig("username", "Username", 100));
    columns.add(new ColumnConfig("subject", "Subject", 100));
    ColumnConfig date = new ColumnConfig("date", "Date", 100);
    date.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/y"));
    columns.add(date);

    ColumnModel cm = new ColumnModel(columns);

    ContentPanel gridPanel = new ContentPanel();
    gridPanel.setFrame(true);
    gridPanel.setCollapsible(false);
    gridPanel.setAnimCollapse(false);
    gridPanel.setButtonAlign(HorizontalAlignment.CENTER);
    gridPanel.setHeaderVisible(false);
    gridPanel.setLayout(new FitLayout());
    gridPanel.setBottomComponent(toolBar);


    Grid<Post> grid = new Grid<Post>(store, cm);
    grid.setLoadMask(true);
    grid.setBorders(true);
    grid.setStripeRows(true);

    gridPanel.add(grid);


    Viewport vp = new Viewport();
    vp.setLayout(new FitLayout());
    vp.add(gridPanel, new FitData(10));
    RootPanel.get().add(vp);

  }

[timefortea]

Hi,
I appreciate your response - but can you explain what was wrong with the original code? You have removed one of my levels of container - in reality my grid is additional levels of container down (I've got a tab panel, within it a border layout, then a content panel which contains a few panels, one of which is the grid; I simplified it to keep the problem concise). My current implementation works fine on Firefox but not on IE, is this expected behaviour because I have laid it out wrong? If so, I could do with a little more information so that I can try to remedy the layout of my application. With a lack of detailed documentation, more information on how the layouts work and why things go wrong would be very much appreciated

The following code is a more accurate approximation of the application layout:

    public void onModuleLoad() 
    {
        // Top level container, with one tab
        LayoutContainer mainContainer = new LayoutContainer();
        mainContainer.setLayout(new FitLayout());
        TabPanel tabPanel = new TabPanel();
        mainContainer.add(tabPanel);

        // Border layout with west/centre/south
        LayoutContainer borderLayoutPanel = new LayoutContainer();
        borderLayoutPanel.setLayout(new BorderLayout());
 
        ContentPanel west = new ContentPanel();  
        ContentPanel centerPanel = new ContentPanel();  
        ContentPanel south = new ContentPanel();  

        BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 200);  
        westData.setSplit(true);  
        westData.setCollapsible(true);  
        westData.setMargins(new Margins(5));  

        BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);  
        centerData.setMargins(new Margins(5, 0, 5, 0));  

        BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH, 100);  
        southData.setSplit(true);  
        southData.setCollapsible(true);  
        southData.setFloatable(true);  
        southData.setMargins(new Margins(0, 5, 5, 5));  

        borderLayoutPanel.add(west, westData);  
        borderLayoutPanel.add(centerPanel, centerData);  
        borderLayoutPanel.add(south, southData);  

        centerPanel.setHeaderVisible(false);
        
        TabItem tabOne = new TabItem("Tab One");
        tabOne.setLayout(new FitLayout());
        tabOne.add(borderLayoutPanel);
        tabPanel.add(tabOne);

        ContentPanel dummyPanel = new ContentPanel();
        dummyPanel.setStyleAttribute("margin", "2px");
        dummyPanel.addText("This is a dummy panel but something will go in here");
        centerPanel.add(dummyPanel);
        
        List<Post> posts = new ArrayList<Post>();
        posts.add(new Post("User1", "xxx", new Date(), "Here we are"));
        posts.add(new Post("User2", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User3", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User4", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User5", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User6", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User7", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User8", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User9", "zzzzzzz", new Date(), "Hello there"));
        posts.add(new Post("User10", "zzzzzzz", new Date(), "Hello there"));
        BasePagingLoadResult bplr = new BasePagingLoadResult<Post>(posts, 0, 10);
        MemoryProxy<BasePagingLoadResult> proxy = new MemoryProxy<BasePagingLoadResult>(bplr);

        // loader
        BasePagingLoader loader = new BasePagingLoader(proxy);
        ListStore<Post> store = new ListStore<Post>(loader);
        loader.load(0, 10);

        final PagingToolBar toolBar = new PagingToolBar(10);
        toolBar.bind(loader);

        List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
        columns.add(new ColumnConfig("forum", "Forum", 100));
        columns.add(new ColumnConfig("username", "Username", 100));
        columns.add(new ColumnConfig("subject", "Subject", 100));
        ColumnConfig date = new ColumnConfig("date", "Date", 100);
        date.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/y"));
        columns.add(date);

        ColumnModel cm = new ColumnModel(columns);

        ContentPanel gridPanel = new ContentPanel();
        gridPanel.setFrame(true);
        gridPanel.setCollapsible(false);
        gridPanel.setAnimCollapse(false);
        gridPanel.setButtonAlign(HorizontalAlignment.CENTER);
        gridPanel.setHeaderVisible(false);
        gridPanel.setLayout(new FitLayout());
        gridPanel.setBottomComponent(toolBar);
        gridPanel.setStyleAttribute("margin", "2px");

        Grid<Post> grid = new Grid<Post>(store, cm);
        grid.setLoadMask(true);
        grid.setBorders(true);
        grid.setStripeRows(true);
        grid.setAutoExpandColumn("forum");
        gridPanel.add(grid);

        //centerPanel.add(gridPanel, new FitData(2) );
        centerPanel.add(gridPanel);
                        
        Viewport vp = new Viewport();
        vp.setLayout(new FitLayout());
        vp.add(mainContainer);
        RootPanel.get().add(vp);
        
    }

My grid's content panel cannot be given a fit layout as it has other siblings within the same containing panel. How can I remedy this?


Thanks again.

[timefortea]

Ok, so I can get it to work if I do:

      gridPanel.add(grid, new FitData(5));

(7 lines before end)

I'd tried a smaller value (2) beforehand and it didn't work. I'm still unclear as to why this is needed, is it an IE hack?

Thanks.

[sven]

The problem is that you are using FlowLayout. In that case your "gridPanel" needs to have soem sizes set.

[timefortea]

Could you expand on what you mean by this please? I since found that when I compiled up the sample code (the last sample given plus the fix that seemed to work for me), that the grid's panel displays incorrectly in Firefox - the height is very small, you cannot see the grid. I also cannot seem to get the fix to work in my real code, I've been through it many times, to make sure that my sample code replicates the layout and it seems to, but the sample works (in IE) but my real code still has the original problem. Somehow the grid sizing is confused - although I set one column to auto-expand, it is actually shown very small, even though there is plenty of visible space. When I try to re-size it, sometimes a different column is re-sized.

I know you cannot diagnose this as you cannot see it - and I cannot post it as there are a lot of classes - but any help you can provide on how I should be laying it out might help me discover what is wrong. Ultimately I want everything to expand to fit the window area, so I've used a lot of FitLayouts. Does the grid need to have a specific size set - is it getting confused because I haven't done this? If not, is there anything else I should look out for with my layouts? I've read all the help and the API docs that are available.

Thanks again.

[sven]

If you are using a layout that manges sizes (for example FitLayout) than you dont need to set a size on the grid. But if the grid is inside a FlowLayout, the grid needs to have some size.