1. #11
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    4
    gslender is on a distinguished road

      0  

    Default


    n0thing,

    Can you take a little more time and explain clearly what you are trying to do. I think I understand, but considering you are so certain it can't be done, I'd best be sure I know what you want to do - once you clearly explain I'll give it a try and post some code.

  2. #12
    Ext User
    Join Date
    Oct 2008
    Posts
    59
    Vote Rating
    0
    n0thing is on a distinguished road

      0  

    Default


    Sure, it is easy to explain. I have a paged grid that I want to take up the entire width of the screen. There's a lot of data in the grid, so it may be the case that even with the entire screen width we may need a horizontal scrollbar. This is especially true for users operating at lower resolutions. This can be simulated by resizing the window so that the grid cannot possibly fit. Also, we should not have any scrollbars if the entire grid fits in the window. Both the grid and paging toolbar should be displayed -- including the paging toolbar's 'displaying X of Y results' message.

    This should work in both IE and Firefox.

  3. #13
    Ext User
    Join Date
    Oct 2008
    Posts
    59
    Vote Rating
    0
    n0thing is on a distinguished road

      0  

    Default


    Here are some images of what I'm getting without doing any dirty 'setWidth' type tricks (none of which are complete solutions).

    In firefox it looks good, but if the window is resized there's no scrollbar. No good.



    Here's what it looks like in IE. This time around we do get a scrollbar if we resize the screen. In fact, we get a scrollbar even though the entire thing fits in the screen. Just look at how big the scrollbar is. Scroll to the right and you'll see absolutely nothing for a few screen widths, and at the end you'll see the paging toolbar's status message.


  4. #14
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    4
    gslender is on a distinguished road

      0  

    Default


    this works for me... scroll bars show when width of window is less than width of grid. no scroll bars when window wide enough to show all columns

    Code:
      public void onModuleLoad() {
        Viewport v = new Viewport();
        v.setLayout(new FitLayout());
        ContentPanel cp = new ContentPanel(new FitLayout());
        cp.setHeading("Grid Test");
        cp.setFrame(true);
    
        List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
    
        ColumnConfig column = new ColumnConfig();
        column.setId("make");
        column.setHeader("Make");
        column.setWidth(100);
        configs.add(column);
    
        column = new ColumnConfig();
        column.setId("model");
        column.setHeader("Model");
        column.setWidth(300);
        configs.add(column);
    
        column = new ColumnConfig();
        column.setId("year");
        column.setHeader("Year");
        column.setAlignment(HorizontalAlignment.RIGHT);
        column.setWidth(75);
        configs.add(column);
    
        ListStore<CarModel> store = new ListStore<CarModel>();
        store.add(new CarModel("Honda","CRV",2002));
        store.add(new CarModel("Mazda","MX5",2006));
        store.add(new CarModel("SAAB","9000",1993));
        store.add(new CarModel("BMW","2002",1973));
    
        ColumnModel cm = new ColumnModel(configs);
        
        Grid<CarModel> grid = new Grid<CarModel>(store, cm);
        cp.add(grid);
    
        v.add(cp, new MarginData(20));
        RootPanel.get().add(v);
      }
    
      public class CarModel extends BaseModel implements
          Serializable {
    
        private static final long serialVersionUID = 3758482745348423852L;
    
        public CarModel() {
    
        }
    
        public CarModel(String make, String model,
            Integer year) {
    
          set("make", make);
          set("model", model);
          set("year", year);
    
        }
    
        public Integer getYear() {
          return (Integer) get("car_year");
        }
    
        public String getMake() {
          return (String) get("car_make");
    
        }
    
        public String getModel() {
          return (String) get("car_model");
        }
      }

  5. #15
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    4
    gslender is on a distinguished road

      0  

    Default


    Quote Originally Posted by n0thing View Post
    Here are some images of what I'm getting without doing any dirty 'setWidth' type tricks (none of which are complete solutions).

    In firefox it looks good, but if the window is resized there's no scrollbar. No good.



    Here's what it looks like in IE. This time around we do get a scrollbar if we resize the screen. In fact, we get a scrollbar even though the entire thing fits in the screen. Just look at how big the scrollbar is. Scroll to the right and you'll see absolutely nothing for a few screen widths, and at the end you'll see the paging toolbar's status message.

    if you are getting rendering issues between browsers, make sure the doctype is correct as per the setup.txt in the download - also make sure other css files are not conflicting

  6. #16
    Ext User
    Join Date
    Oct 2008
    Posts
    59
    Vote Rating
    0
    n0thing is on a distinguished road

      0  

    Default


    Thanks for the code gslender. It does indeed work, but unfortunately I did not provide a complete description of the problem. As you can see from the images I posted, I need other components on the screen other than the grid. Specifically, I need components above it and a fixed width component on the left side (e.g. currently using a DockPanel with stuff in the west and center, where the center has one component sitting atop the grid).

    After playing with the code you posted I discovered that the Viewport was what fixed the scrollbar problems. Naturally, I tried to simply put the whole center component into the Viewport but that just caused the left component to get overlapped.

    By the way, I've got the doctype set to quirks mode as recommended: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  7. #17
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    4
    gslender is on a distinguished road

      0  

    Default


    The best thing to do is break your layout into parts, and get the right behaviour for each part working first - I normally do this is testable bits that I can harness up and always test against. That way, when something breaks, you're not wondering where and how it happened.

    I think you can see the light at the end of the tunnel now - yes??

    cheers,
    grant

  8. #18
    Ext User
    Join Date
    Oct 2008
    Posts
    59
    Vote Rating
    0
    n0thing is on a distinguished road

      0  

    Default


    Thanks for the tip, but I've been aware of 'divide and conquer' for quite some time. Your sample is cute, but relatively useless. Think about it...just how useful would a screen with nothing but a grid be? Now, suppose we replace the second to last line of your onModuleLoad():

    Code:
    v.add(lc, new MarginData(20));
    with:

    Code:
    LayoutContainer lc = new LayoutContainer();
    lc.setLayout(new FlowLayout());
    lc.add(new Text("hi there how are you"));
    lc.add(new Text("oh i'm just dandy"));
    lc.add(cp);
    v.add(lc, new MarginData(20));
    It no longer works. Is there any documentation that describes why this is the case? It seems like a very natural thing to do. Now if we instead substitute the following:

    Code:
    LayoutContainer lc = new LayoutContainer();
    lc.setLayout(new BorderLayout());
    lc.add(new Text("hi there how are you"), new BorderLayoutData(Style.LayoutRegion.NORTH));
    lc.add(cp, new BorderLayoutData(Style.LayoutRegion.CENTER));
    v.add(lc, new MarginData(20));
    Viola! It works. This suggests that BorderLayout adheres to some contract that FlowLayout does not. Is this behavior explained anywhere? If not, is it fair to say this should be considered a bug?

  9. #19
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    You mean

    Code:
    v.add(cp, new MarginData(20));
    as last line or?

    For your example:

    Code:
    cp.setSize(600,400);
    should do the trick. The grid needs some size...

  10. #20
    Ext User
    Join Date
    Oct 2008
    Posts
    59
    Vote Rating
    0
    n0thing is on a distinguished road

      0  

    Default


    Forgive me, but I don't understand how v.add(cp, ...) becomes cp.setSize(...). What are you getting at?