1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    9
    Vote Rating
    0
    jongraf is on a distinguished road

      0  

    Default Answered: Building something like the Sencha GXT Explorer Demo

    Answered: Building something like the Sencha GXT Explorer Demo


    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

  2. 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:

    Code:
    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());
      }
    }

  3. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,634
    Answers
    107
    Vote Rating
    79
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    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.

  4. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    9
    Vote Rating
    0
    jongraf is on a distinguished road

      0  

    Default


    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

  5. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,634
    Answers
    107
    Vote Rating
    79
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    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:

    Code:
    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());
      }
    }

  6. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    9
    Vote Rating
    0
    jongraf is on a distinguished road

      0  

    Default


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

  7. #6
    Sencha User
    Join Date
    Jan 2013
    Posts
    9
    Vote Rating
    0
    jongraf is on a distinguished road

      0  

    Default


    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.

    PHP Code:
            VerticalLayoutContainer vlc2 = new VerticalLayoutContainer();
            
    vlc2.setScrollMode(ScrollMode.AUTO);
            
    vlc2.add(createDefaultData1());
            
    vlc2.add(createDefaultData2());
            
            
    tabPanel.add(vlc2, new TabItemConfig("Welcome yo!"true)); 
    Last edited by jongraf; 29 Jan 2013 at 1:56 PM. Reason: Cleared up confusion in post #7 about creating data in a tab vs. creating new tabs

  8. #7
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,634
    Answers
    107
    Vote Rating
    79
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    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).

  9. #8
    Sencha User
    Join Date
    Jan 2013
    Posts
    9
    Vote Rating
    0
    jongraf is on a distinguished road

      0  

    Default


    See my edit

  10. #9
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,634
    Answers
    107
    Vote Rating
    79
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar