1. #1
    Ext GWT Premium Member
    Join Date
    Apr 2008
    Posts
    34
    Vote Rating
    0
    chicagoarchitect is on a distinguished road

      0  

    Question Floating Window in BorderLayout

    Floating Window in BorderLayout


    Is it possible to have a floating Window that's contained within a BorderLayout? When I drag the window around, it appears that it will float over the layout, however, then I let go of the mouse, it gets hidden under.

    Code:
    import com.extjs.gxt.ui.client.Style.LayoutRegion;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.Viewport;
    import com.extjs.gxt.ui.client.widget.Window;
    import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
    import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
    import com.extjs.gxt.ui.client.widget.layout.FitLayout;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    
    public class FloatingWindow
        implements EntryPoint
    {
    
        /* (non-Javadoc)
         * @see com.google.gwt.core.client.EntryPoint#onModuleLoad()
         */
        @Override
        public void onModuleLoad()
        {
            Viewport viewport = new Viewport();
            viewport.setLayout(new FitLayout());
            
            LayoutContainer lContainer = new LayoutContainer(new BorderLayout());
            
            ContentPanel nc = new ContentPanel();
            ContentPanel ec = new ContentPanel();        
            ContentPanel wc = new ContentPanel();
            ContentPanel sc = new ContentPanel();
            
            BorderLayoutData nd = new BorderLayoutData(LayoutRegion.NORTH, 100);
            BorderLayoutData ed = new BorderLayoutData(LayoutRegion.EAST, 50);        
            BorderLayoutData wd = new BorderLayoutData(LayoutRegion.SOUTH, 100);
            BorderLayoutData sd = new BorderLayoutData(LayoutRegion.WEST, 50);
    
            lContainer.add(nc, nd);
            lContainer.add(ec, ed);
            lContainer.add(wc, wd);
            lContainer.add(sc, sd);
            
            
            ContentPanel cc = new ContentPanel();
            BorderLayoutData cd = new BorderLayoutData(LayoutRegion.CENTER, 100);
            
            Window window = new Window();
            window.setClosable(true);
            window.setDraggable(true);
            window.setResizable(true);
            window.setConstrain(false);
            
            ContentPanel windowContent = new ContentPanel(new FitLayout());
            windowContent.addText("This is my floating window.");
            window.add(windowContent);
            cc.add(window);
            
            lContainer.add(cc, cd);
            
            viewport.add(lContainer);
            
            RootPanel.get().add(viewport);
        }        
    
    }

  2. #2
    Sencha User
    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


    Window does not work very well if added to any container directly. We are going to redesign window in GXT3 so it can be used like this.

    The problem is that the dragproxy gets added to the body element and not the parent widget of the window.

  3. #3
    Ext GWT Premium Member
    Join Date
    Apr 2008
    Posts
    34
    Vote Rating
    0
    chicagoarchitect is on a distinguished road

      0  

    Default thanks

    thanks


    Thanks for the quick reply sven! How did you get the Window to float nicely in the Windows>AccordionWindow example?

  4. #4
    Sencha User
    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 have the source for this. Its on the bottom behind the "source" tab.

    instead of calling add(window) you need to show it:

    Code:
    window.show();

  5. #5
    Ext GWT Premium Member
    Join Date
    Apr 2008
    Posts
    34
    Vote Rating
    0
    chicagoarchitect is on a distinguished road

      0  

    Default


    it's working! Thanks sven!

  6. #6
    Ext GWT Premium Member
    Join Date
    Apr 2008
    Posts
    34
    Vote Rating
    0
    chicagoarchitect is on a distinguished road

      0  

    Default


    Sorry one more question. This is weird, here is the modification I made to my original code, But now I get 2 copies of the window. Very odd:

    Code:
            window.show();
            //cc.add(window);

  7. #7
    Sencha User
    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


    Code:
    Viewport viewport = new Viewport();
            viewport.setLayout(new FitLayout());
    
            LayoutContainer lContainer = new LayoutContainer(new BorderLayout());
    
            ContentPanel nc = new ContentPanel();
            ContentPanel ec = new ContentPanel();
            ContentPanel wc = new ContentPanel();
            ContentPanel sc = new ContentPanel();
    
            BorderLayoutData nd = new BorderLayoutData(LayoutRegion.NORTH, 100);
            BorderLayoutData ed = new BorderLayoutData(LayoutRegion.EAST, 50);
            BorderLayoutData wd = new BorderLayoutData(LayoutRegion.SOUTH, 100);
            BorderLayoutData sd = new BorderLayoutData(LayoutRegion.WEST, 50);
    
            lContainer.add(nc, nd);
            lContainer.add(ec, ed);
            lContainer.add(wc, wd);
            lContainer.add(sc, sd);
    
            ContentPanel cc = new ContentPanel();
            BorderLayoutData cd = new BorderLayoutData(LayoutRegion.CENTER, 100);
    
            Window window = new Window();
            window.setClosable(true);
            window.setDraggable(true);
            window.setResizable(true);
            window.setConstrain(false);
    
            ContentPanel windowContent = new ContentPanel(new FitLayout());
            windowContent.addText("This is my floating window.");
            window.add(windowContent);
            window.show();
    
            lContainer.add(cc, cd);
    
            viewport.add(lContainer);
    
            RootPanel.get().add(viewport);
    I run this code and only get one window.

  8. #8
    Ext GWT Premium Member
    Join Date
    Apr 2008
    Posts
    34
    Vote Rating
    0
    chicagoarchitect is on a distinguished road

      0  

    Default


    Unfortunately, I'm still experiencing this issue. Both windows are draggable. Using GXT 2.2.0 & GWT 2.0.4. I see this in IE 7 & FF 3.6
    initial-page.PNGpost-dragging.PNG

  9. #9
    Sencha User
    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


    I am also using GXT 2.2 and it works without problems. Can you post the exact code you use now here too?

  10. #10
    Ext GWT Premium Member
    Join Date
    Apr 2008
    Posts
    34
    Vote Rating
    0
    chicagoarchitect is on a distinguished road

      0  

    Default


    Exact same as yours from post #7. I'm including imports:

    Code:
    import com.extjs.gxt.ui.client.Style.LayoutRegion;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.Viewport;
    import com.extjs.gxt.ui.client.widget.Window;
    import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
    import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
    import com.extjs.gxt.ui.client.widget.layout.FitLayout;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    
    public class FloatingWindow
        implements EntryPoint
    {
    
        /* (non-Javadoc)
         * @see com.google.gwt.core.client.EntryPoint#onModuleLoad()
         */
        @Override
        public void onModuleLoad()
        {
            Viewport viewport = new Viewport();
            viewport.setLayout(new FitLayout());
    
            LayoutContainer lContainer = new LayoutContainer(new BorderLayout());
    
            ContentPanel nc = new ContentPanel();
            ContentPanel ec = new ContentPanel();
            ContentPanel wc = new ContentPanel();
            ContentPanel sc = new ContentPanel();
    
            BorderLayoutData nd = new BorderLayoutData(LayoutRegion.NORTH, 100);
            BorderLayoutData ed = new BorderLayoutData(LayoutRegion.EAST, 50);
            BorderLayoutData wd = new BorderLayoutData(LayoutRegion.SOUTH, 100);
            BorderLayoutData sd = new BorderLayoutData(LayoutRegion.WEST, 50);
    
            lContainer.add(nc, nd);
            lContainer.add(ec, ed);
            lContainer.add(wc, wd);
            lContainer.add(sc, sd);
    
            ContentPanel cc = new ContentPanel();
            BorderLayoutData cd = new BorderLayoutData(LayoutRegion.CENTER, 100);
    
            Window window = new Window();
            window.setClosable(true);
            window.setDraggable(true);
            window.setResizable(true);
            window.setConstrain(false);
    
            ContentPanel windowContent = new ContentPanel(new FitLayout());
            windowContent.addText("This is my floating window.");
            window.add(windowContent);
            window.show();
    
            lContainer.add(cc, cd);
    
            viewport.add(lContainer);
    
            RootPanel.get().add(viewport);
        }        
    
    }

Similar Threads

  1. Replies: 2
    Last Post: 6 Aug 2010, 5:42 AM
  2. [CLOSED][2.x/3.x] BorderLayout floating region not resized
    By SimonDeNooij in forum Ext 3.x: Bugs
    Replies: 18
    Last Post: 5 Mar 2010, 10:11 AM
  3. closable panel or NOT floating window???
    By avialle in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 12 Sep 2008, 3:42 AM
  4. Floating DIV over BorderLayout
    By Twain in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 28 Feb 2008, 6:26 AM

Thread Participants: 1

Tags for this Thread