Building something like the Sencha GXT Explorer Demo

[jongraf]

Hello,

I would like to build an application with an interface similar to the Sencha GXT Explorer Demo. Specifically, I would like tabPanels with scroll bars that resize based on the browser size. I am having a whole lot of trouble figuring this out. This is my layout:

• RootPanel
  • Viewport
    • LayoutContainer
      • FramedPanel (the application window with title bar)
        • Toolbar
        • TabPanel

Inside the tabPanel, I put a verticalLayoutContainer and set the scrollMode to ALWAYS. I put a long string of HTML in it and unfortunately, the HTML just crosses over into the netherworld. The only partial solution I could find was to layout with HTML with VerticalLayoutData at 71%, however this does not change the scroll bars when I resize the browser.

Any advice would be greatly appreciated.

Jonathan

[Colin Alworth]

There is no class called LayoutContainer in GXT 3 - are you using GXT 2 and just posting in the GXT 3 forums?

VerticalLayoutContainer (hereafter VLC) is not really designed to let its contents scroll - there are much better widgets for that. Consider FlowLayoutContainer, or CssFloatLayoutContainer. Instead, VLC is supposed to take VerticalLayoutData which describe the relative height/width of the child. That being said, if you provide values of -1 for the layout data, it should let the child take up its own size - but still not recommended.

Beyond that, this seems reasonable. Can you share a runnable sample just building the TabPanel with its content in it?

The explorer has a slightly different structure than what you describe, mostly because of the side bar to select an example. It uses a BorderLC to achieve the header and side bar:

• RootPanel
  • Viewport
    • BorderLayoutContainer
      • west: VerticalLC
        • StoreFilterField
        • ListView
      • north: HtmlLayoutContainer
      • center: TabPanel
        • examples...

Most of the code that builds this outer shell of the app up can be found in com.sencha.gxt.explorer.client.ExplorerShell in the examples source.

[jongraf]

My apologies, we are using FlowLayoutContainer.

• RootPanel
  • Viewport
    • FlowLayoutContainer
      • FramedPanel (the application window with title bar)
        • Toolbar
        • TabPanel

I think the solution might be to just follow your layout approach and use the BorderLC. I don't have a working example that is distributable at this time unfortunately. We are following the MVP pattern and things are already broken up into a few classes.

I will grab the examples source and investigate. Is there anything special about what I put inside the TabPanel that I should know about? Should I put a FlowLC inside the TabPanel to allow it to automatically resize with scroll bars?

Thank you for your quick reply!

Jonathan

[Colin Alworth]

The FlowLayoutContainer almost certainly doesn't belong there. The purpose of this container is to allow children to size as they normally would, instead of being sized by their parent. Try this quick example, which follows your outline except for the FlowLC:

public class Test  implements EntryPoint {

  public void onModuleLoad() {
    FramedPanel root = new FramedPanel();
    root.setHeadingText("Header");

    //not sure where the Toolbar belonged, so made it with a VLC
    VerticalLayoutContainer vlc = new VerticalLayoutContainer();

    ToolBar toolbar = new ToolBar();
    toolbar.add(new ToolButton(ToolButton.REFRESH));
    toolbar.add(new ToolButton(ToolButton.GEAR));
    toolbar.add(new ToolButton(ToolButton.SAVE));

    vlc.add(toolbar, new VerticalLayoutData(1, -1));//100% of the width, use only required height

    TabPanel tabPanel = new TabPanel();
    HTML bunchOfText = new HTML();
    bunchOfText.getElement().getStyle().setOverflowX(Overflow.AUTO);
    addContent(bunchOfText, 1000);
    tabPanel.add(bunchOfText, "1,000 words");

    HTML smallerText = new HTML();
    addContent(smallerText, 100);
    tabPanel.add(smallerText, "100 words");

    HTML hugeText = new HTML();
    hugeText.getElement().getStyle().setOverflowX(Overflow.AUTO);
    addContent(hugeText, 10000);
    tabPanel.add(hugeText, "10,000 words");

    vlc.add(tabPanel, new VerticalLayoutData(1,1));//use 100% of width, and 100% of remaining height

    root.setWidget(vlc);

    Viewport vp = new Viewport();
    vp.setWidget(root);

    RootPanel.get().add(vp);
  }

  private static final String alpha = "abcdefghijklmnopqrstuvwxyz";
  private void addContent(HTML text, int wc) {
    StringBuilder sb = new StringBuilder();
    for (int i = 0; i < wc; i++) {
      if (i != 0) {
        sb.append(" ");
      }
      int len = Random.nextInt(8);
      for (int j = 0; j < len; j++) {
        sb.append(alpha.charAt(Random.nextInt(26)));
      }
    }
    text.setHTML(sb.toString());
  }
}

[jongraf]

This works perfectly. Thank you for the example. Your response speed is notable.

[jongraf]

Colin,

I wanted to add this to the thread:

To then put multiple items within your tabPanel, the developer can create VerticalLayoutContainer and set scrollMode to AUTO. Then add the VLC to the tabPanel.

        VerticalLayoutContainer vlc2 = new VerticalLayoutContainer();
        vlc2.setScrollMode(ScrollMode.AUTO);
        vlc2.add(createDefaultData1());
        vlc2.add(createDefaultData2());
        
        tabPanel.add(vlc2, new TabItemConfig("Welcome yo!", true)); 

[Colin Alworth]

I'm not entire sure what it means to have a tab inside a VLC inside a TabPanel...

But yes, that will work. FlowLC is still a better fit than VLC though, since you are never asking the VLC to size its children (no VerticalLayoutData means -1,-1).

[jongraf]

See my edit

[Colin Alworth]

Great, yeah, that makes sense - the VLC still doesn't belong though. This is only a performance problem - the VLC will think about sizing while the FlowLC will completely ignore it. Even that shouldn't be a big concern. Just be aware that VLC and HorizontalLC are not designed to work without being a) given a size, and b) told to assign sizes to children. You are satisfying a) here, so HLC would also behave, but FlowLC is probably what you meant.