Results 1 to 2 of 2

Thread: Centered application layout with Viewport

  1. #1
    Ext User
    Join Date
    Feb 2009
    Location
    Austria
    Posts
    8
    Vote Rating
    0
      0  

    Question Centered application layout with Viewport

    Hi everybody,

    I changed the layout of my GXT application and now I'm facing some real problems with implementation

    The basic version was something like that (simplified)

    Code:
    Viewport vp = new Viewport();
    vp.setLayout(new BorderLayout());
    
    // northern content with fixed height
    LayoutContainer northContainer = new LayoutContainer();
    vp.add(northContainer, new BorderLayoutData(LayoutRegion.NORTH, 120));
    
    // center content
    centerContainer = new LayoutContainer(new FitLayout());
    centerContainer.add(new Button("BIGBUTTON"));
    vp.add(centerContainer, new BorderLayoutData(LayoutRegion.CENTER));
    
    RootPanel.get().add(vp);
    Everything worked well for me - sizing was done by the Viewport, the northern panel had its 120 pixels height, the centered container and its child filled up the rest of the screen.

    But now, requirements have changed - the content should have a fixed width, should be centered and height should by still sized dynamically...

    So, i tried CenterLayout...

    Code:
    Viewport vp = new Viewport();
    vp.setLayout(new CenterLayout());
    
    LayoutContainer contentContainer = new LayoutContainer(new BorderLayout());
    contentContainer.setWidth(1024);
    // does this help at all...?
    contentContainer.setAutoHeight(true);
    
    // northern content with fixed height
    LayoutContainer northContainer = new LayoutContainer();
    contentContainer .add(northContainer, new BorderLayoutData(LayoutRegion.NORTH, 120));
    
    // center content
    centerContainer = new LayoutContainer(new FitLayout());
    centerContainer.add(new Button("BIGBUTTON"));
    contentContainer add(centerContainer, new BorderLayoutData(LayoutRegion.CENTER));
    
    RootPanel.get().add(vp);
    In the second version, the centerContainer has only the default height of the attached button, but never gets stretched to the full Viewport...

    I thought of columns, but how should I (dynamically) size the space on the left and the right side of my applications content?

    Thanks for any ideas...

    Kind regards,
    Florian

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976
    Vote Rating
    131
      0  

    Default

    You can extend CenterLayout to center it only horizontally, with a fixed width and dynamic height.

    Else you can use a rowlayout iwth oritentation horizontal. and 3 items in there. But i suggest the first one.

Posting Permissions

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