1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    60
    Vote Rating
    0
    villemustonen is on a distinguished road

      0  

    Default Window with BorderLayout, strange behaviour

    Window with BorderLayout, strange behaviour


    Hi,

    I have a problem with a Window with a BorderLayout. In my application there can be several instances of the same Window, but each time I open up a new Window, the BorderLayout looks different. Sometimes panels are of different size, and sometimes panels that are supposed to be collapsed aren't collapsed, and sometimes panels display a darker blue background, and upon clicking it the panel opens up outside the Window. Most of the time the south panel starts slighly smaller, and upon opening a new one it grows a little, but the above behaviour seems to occur totally randomly. The panels never seem to be in a collapsed state when opening.

    I am using EXT-GWT version 1.0.1. and GWT version 1.5

    Code:
    package com.test.client;
    
    import com.extjs.gxt.ui.client.Events;
    import com.extjs.gxt.ui.client.Registry;
    import com.extjs.gxt.ui.client.Style.LayoutRegion;
    import com.extjs.gxt.ui.client.Style.Scroll;
    import com.extjs.gxt.ui.client.event.ComponentEvent;
    import com.extjs.gxt.ui.client.event.Listener;
    import com.extjs.gxt.ui.client.util.Margins;
    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.AccordionLayout;
    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.extjs.gxt.ui.client.widget.toolbar.AdapterToolItem;
    import com.extjs.gxt.ui.client.widget.toolbar.SeparatorToolItem;
    import com.extjs.gxt.ui.client.widget.toolbar.TextToolItem;
    import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.Label;
    import com.google.gwt.user.client.ui.RootPanel;
    
    public class WindowBug implements EntryPoint {
    
        /**
         * This is the entry point method.
         */
        public void onModuleLoad() {
            new SessionDesktop();
        }
    
    }
    
    class SessionDesktop extends LayoutContainer {
    
        private ContentPanel sessionDesktopPanel = new ContentPanel();
        private Viewport sessionViewport = new Viewport();
        private ToolBar topToolBar = new ToolBar();
        private ToolBar bottomToolBar = new ToolBar();
        private TextToolItem searchItem = new TextToolItem("Window", "icon-search");
        private Label loginInfoLabel = new Label();
        private AdapterToolItem sessionInfoItem = new AdapterToolItem(
                loginInfoLabel);
    
        public SessionDesktop() {
    
            // register SessionDesktop
            Registry.register("sessionDesktop", this);
    
            // desktop background
            sessionDesktopPanel.setBodyStyleName("gwt-sessionDesktopPanel");
    
            // Set navigation button styles
            searchItem.setStyleName("underlined");
    
            // add toolbar items
            topToolBar.add(searchItem);
            bottomToolBar.add(sessionInfoItem);
            bottomToolBar.add(new SeparatorToolItem());
    
            // initialize panel
            sessionDesktopPanel.setHeaderVisible(false);
            sessionDesktopPanel.setTopComponent(topToolBar);
            sessionDesktopPanel.setBottomComponent(bottomToolBar);
            sessionViewport.add(sessionDesktopPanel);
    
            // viewport layout
            sessionViewport.setLayout(new FitLayout());
            RootPanel.get().add(sessionViewport);
    
            // button listeners
            searchItem.addListener(Events.Select, new Listener<ComponentEvent>() {
    
                public void handleEvent(ComponentEvent be) {
    
                    new SearchWindow();
    
                }
    
            });
    
            setEnabled("Search", true);
    
        }
    
        public void setEnabled(String button, boolean enabled) {
    
            if (button.equals("Search")) {
                if (enabled) {
                    searchItem.setEnabled(true);
                } else {
                    searchItem.setEnabled(false);
                }
            }
    
        }
    
    }
    
    class SearchWindow {
    
        // Search window
        private Window searchWindow;
    
        // BorderLayout panels
        private ContentPanel north;
        private ContentPanel west;
        private ContentPanel east;
        private ContentPanel south;
        private ContentPanel center;
        private BorderLayoutData northData;
        private BorderLayoutData westData;
        private BorderLayoutData eastData;
        private BorderLayoutData southData;
        private BorderLayoutData centerData;
    
        public SearchWindow() {
    
            // Initialize the window
            searchWindow = new Window();
    
            // Window settings
            searchWindow.setLayoutOnChange(true);
            searchWindow.setMaximizable(true);
            searchWindow.setHeading("Window");
            searchWindow.setWidth(640);
            searchWindow.setHeight(480);
    
            // Initialize BorderLayout
            searchWindow.setLayout(new BorderLayout());
            initPanels();
    
            // Add widgets to panels. FitLayout required for correct
            // center-panel
            // scrolling.
    
            // Add panels to the window
            searchWindow.add(north, northData);
            searchWindow.add(west, westData);
            searchWindow.add(center, centerData);
            searchWindow.add(east, eastData);
            searchWindow.add(south, southData);
    
            searchWindow.show();
        }
    
        private void initPanels() {
    
            // North-panel
            north = new ContentPanel();
            north.setStyleName("gwt-searchWindowNorth");
            north.setHeading("North Panel");
            north.setHeaderVisible(false);
            northData = new BorderLayoutData(LayoutRegion.NORTH, 80);
            northData.setCollapsible(false);
            northData.setFloatable(false);
            northData.setSplit(true);
            northData.setMargins(new Margins(3, 3, 0, 3));
            northData.setMaxSize(80);
    
            // West-panel
            west = new ContentPanel();
            west.setStyleName("gwt-searchWindowWest");
            west.setHeading("West Panel");
            west.setLayout(new AccordionLayout());
            west.setHeaderVisible(true);
            west.setAnimCollapse(true);
    
            westData = new BorderLayoutData(LayoutRegion.WEST, 200);
            westData.setSplit(true);
            westData.setCollapsible(true);
            westData.setFloatable(true);
            westData.setMargins(new Margins(3));
            west.setLayoutData(west, westData);
    
            west.collapse();
    
            // East-panel
            east = new ContentPanel();
            east.setStyleName("gwt-searchWindowEast");
            east.setHeading("East Panel");
            east.setHeaderVisible(true);
            east.setAnimCollapse(true);
            eastData = new BorderLayoutData(LayoutRegion.EAST, 200);
            eastData.setSplit(true);
            eastData.setCollapsible(true);
            eastData.setFloatable(true);
            eastData.setMargins(new Margins(3));
    
            east.collapse();
    
            // South-panel
            south = new ContentPanel();
            south.setStyleName("gwt-searchWindowSouth");
            south.setHeading("South Panel");
            south.setHeaderVisible(true);
            south.setAnimCollapse(true);
            southData = new BorderLayoutData(LayoutRegion.SOUTH, 100);
            southData.setSplit(true);
            southData.setCollapsible(true);
            southData.setFloatable(true);
            southData.setMargins(new Margins(0, 3, 3, 3));
    
            south.collapse();
    
            // Center-panel
            center = new ContentPanel();
            center.setStyleName("gwt-searchWindowCenter");
            center.setHeading("Center Panel");
            center.setHeaderVisible(true);
            center.setScrollMode(Scroll.AUTO);
            center.setCollapsible(false);
            centerData = new BorderLayoutData(LayoutRegion.CENTER);
            centerData.setMargins(new Margins(3, 0, 3, 0));
    
        }
    }

  2. #2
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    3
    gslender is on a distinguished road

      0  

    Default


    what html doctype are you using ?

  3. #3
    Ext User
    Join Date
    Jul 2008
    Posts
    60
    Vote Rating
    0
    villemustonen is on a distinguished road

      0  

    Default doctype

    doctype


    Hi, thanks for replying.

    My doctype is <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

  4. #4
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    3
    gslender is on a distinguished road

      0  

    Default


    can't reproduce your problem... can you give direct instructions to follow.

    I'm using XP and IE 6.0x

  5. #5
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    3
    gslender is on a distinguished road

      0  

    Default


    ok, figured out the problem... took me a while to reproduce it, but enough mucking around caused it... BorderLayout uses a statemanager to remember the previous collapsed state - you can disable state in the contentpanels

    as for pre-collapsed state - I don't believe you can with BorderLayout - it uses a different kind of collapse panel for collapsing and there is no method to collapse it... so you will need to extend and modify the default borderlayout.

  6. #6
    Ext User
    Join Date
    Jul 2008
    Posts
    60
    Vote Rating
    0
    villemustonen is on a distinguished road

      0  

    Default


    Ok, I'll have to look into that. Thanks a billion for helping out

Thread Participants: 1