Results 1 to 10 of 10

Thread: Anomaly with window.setContainer()

    You found a bug! We've classified it as EXTGWT-4120 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    19

    Question Anomaly with window.setContainer()

    Currently using GXT 3.1.4

    We have cases where we instantiate free floating windows (we're not using portals). These windows are supposed to be confined to the to the area below the grey menustrip(the menustrip is in an HBoxLayoutContainer and the area below it is also an HBoxLayoutContainer container) and attempts to move a window above that area to cover the menustrip would fail-which is what we want (see figure 1).
    pic_1.jpg
    Figure 1

    We always wanted that grey strip to remain unobstructed and used the call, window-in-question.setContainer(container-below-grey-menustrip). However, when the height of the browser window is reduced, the floating window will not be confined to the desired area and will overlap the menustrip-as shown in figure 2. Is there something that can be done to prevent this from happening? Is it a bug in GXT? This happens in both IE and Chrome
    pic2_1.jpg
    Figure 2

  2. #2
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,163

    Default

    That sounds like it could be a bug, but I can't tell with out seeing the code. Could you create a test case that I could reproduce locally and I could identify and load the context for the issue?

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    19

    Question

    Here's a bare bones example project that I created using eclipse and GXT 3.1.4. (This anomaly is not caused by eclipse, it is also noted on the compiled project on web server) : Here's the code of the main entry point:

    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.user.client.ui.VerticalPanel;
    import com.sencha.gxt.widget.core.client.Window;
    import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer;


    import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
    import com.sencha.gxt.widget.core.client.container.Viewport;
    import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData;
    import com.sencha.gxt.widget.core.client.menu.Menu;
    import com.sencha.gxt.widget.core.client.menu.MenuBar;
    import com.sencha.gxt.widget.core.client.menu.MenuBarItem;


    public class DebugGXT implements EntryPoint {

    private Viewport viewPort = new Viewport();
    private BorderLayoutContainer mainPanel = new BorderLayoutContainer(); // main container that ultimately will hold everything
    private BorderLayoutData northData = new BorderLayoutData(33); //The menuBarContainer will reside in the North part of mainPanel
    private VerticalLayoutContainer northContainer = new VerticalLayoutContainer(); //this container holds the menubar
    private VerticalPanel remainderPanel = new VerticalPanel(); //THIS WOULD BE WHERE A FREE FLOATING WINDOW WILL RESIDE AND BE CONFINED

    // Sample Menubar:
    MenuBar mainMenuBar = new MenuBar();

    @Override

    public void onModuleLoad() {
    makeGUI();


    //create free floating window:
    Window w = new Window();
    w.setHeadingText("Test Window");
    w.setSize("400", "300");

    //Here we set this window to be confined to the VerticalPanel, "remainderPanel".
    // When this window 'w' is manually moved around, (AND the height of the browser window is greater than that of our floating window 'w'),
    // it will stay within the confines of remainderPanel like it should. However, instead if you decrease the height of the browser window via mouse, so that it's
    //less than the height of 'w', the free floating window 'w' will overlap onto the northContainer which contains the menubar after
    // the mouse button is released.
    w.getDraggable().setContainer(remainderPanel);
    w.show();
    }


    private void makeGUI(){
    mainMenuBar.setHeight(30);
    mainMenuBar.add(new MenuBarItem("Dummy Item",new Menu()));
    northContainer.add(mainMenuBar);
    mainPanel.setNorthWidget(northContainer,northData);
    mainPanel.add(remainderPanel);
    viewPort.add(mainPanel);
    RootPanel.get("windowContainer").add(viewPort);
    }
    }

    And here's the corresponding HTML portion:

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>DebugGXT</title>
    <script type="text/javascript" language="javascript" src="debuggxt/debuggxt.nocache.js"></script>
    </head>


    <body>
    <div id="windowContainer"></div>
    </body>
    </html>

  4. #4
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,163

    Default

    Thanks for reporting. I've replicate it and filed it.

  5. #5
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,163

    Default

    You could work around this by sublcassing window and on the first attach, use the same logic that is used in draggable and/or maybe window.fitContainer.

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    19

    Default

    Thanks for your reply.

  7. #7
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    19

    Default

    Quote Originally Posted by branflake2267 View Post
    You could work around this by sublcassing window and on the first attach, use the same logic that is used in draggable and/or maybe window.fitContainer.
    I was wondering if you could expand on your reply? Could you please show a sample code snippet of the window subclass that you're referring to? Thanks

  8. #8
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,163

    Default

    I'm doing some guessing here, but something like this could be done.

    Code:
     Window w = new Window() {
          @Override
          protected void onAfterFirstAttach() {
            super.onAfterFirstAttach();
            
            constrainWindow();
          }
    
    
          private void constrainWindow() {
            // Copy some of the logic from draggable fit container
            
            // guessing at moment, but things like this could be done
            // check out what Draggable does
            int left = parentContainer.getAbsoluteLeft();
            int winTop = getElement().getAbsoluteTop();
            int parenttop = parentContainer.getElement().getTop();
            
            if (problem) {
              // move it, its in the wrong position
              setPosition(left, top);
            }
            
          }
        };
    Would that help?

  9. #9
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    19

    Default

    Thanks-I'll give it try.

  10. #10
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,163

    Default

    Workaround for constraining the window to a parent container.

    Look for the // ~~~ workaround comments.
    Code:
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.sencha.gxt.core.client.util.Point;
    import com.sencha.gxt.widget.core.client.FramedPanel;
    import com.sencha.gxt.widget.core.client.Window;
    import com.sencha.gxt.widget.core.client.button.TextButton;
    import com.sencha.gxt.widget.core.client.event.SelectEvent;
    import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
    
    
    public class SimpleWindowTest2 implements EntryPoint {
    
    
      private FramedPanel parentPanel;
    
    
      @Override
      public void onModuleLoad() {
        TextButton button = new TextButton("Open Window");
        button.addSelectHandler(new SelectHandler() {
          @Override
          public void onSelect(SelectEvent event) {
            showWindow();
          }
        });
    
    
        parentPanel = new FramedPanel();
        parentPanel.setHeading("Desktop Panel");
        parentPanel.setBounds(100, 0, 700, 600);
        parentPanel.addButton(button);
    
    
        RootPanel.get().add(parentPanel);
      }
    
    
      protected void showWindow() {
        final Window window = new Window();
        window.setHeading("Window");
        window.setMinimizable(true);
        window.setMaximizable(true);
        window.setPixelSize(500, 400);
        window.setBlinkModal(true);
        window.setModal(true);
        window.setOnEsc(false);
    
    
        // ~~~ workaround - Constrain window to parent during dragging
        window.getDraggable().setConstrainClient(true);
        window.getDraggable().setContainer(parentPanel);
    
    
        window.show();
    
    
        // ~~~ workaround - Constrain the window after shown
        Point pw = window.getElement().getPosition(false);
        Point p = window.getElement().adjustForConstraints(parentPanel.getElement(), pw);
        window.setPagePosition(p.getX(), p.getY());
      }
    
    
    }

Similar Threads

  1. SA3 Anomaly
    By mlmcconnell in forum Sencha Architect 3.x: Q&A
    Replies: 2
    Last Post: 12 Aug 2013, 6:24 AM
  2. Alternate for setcontainer(Ext.container) in Ext js 4
    By vigneshwaranv in forum Ext: Q&A
    Replies: 1
    Last Post: 23 Jan 2013, 10:19 AM
  3. Firefox Anomaly
    By InterTrade in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 19 May 2009, 1:25 PM
  4. Error this.layout.setContainer is not a function
    By Rafael in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 13 Jan 2009, 7:05 AM
  5. [2.0rc1] Bug in ContainerLayout.setContainer
    By AlexRyabov in forum Ext 2.x: Bugs
    Replies: 9
    Last Post: 6 Nov 2007, 8:12 AM

Posting Permissions

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