Ocassional "Blue View"

[Beren77]

Hi,

we use GXT 1.4 along with GWT 1.5.3 in our web-application.

On the left hand side, I display a tree and when a user clicks on an item in this tree, an editor on the right hand sides opens up in a TabPanel as a TabItem.
This works _most of the time_. Sometimes, however, instead of the editor, I get a ContentPanel with the style "x-layout-collapsed x-panel" filling the whole screen and obscuring my view. I tried to reproduce the problem by writing a small application that does essentially the same, but without our complex-server logic, but the problem -- naturally -- does not appear in that small program.
However, if I comment out all server-interaction, the problem still appears in our web-application. Do you guys have any idea why GXT could produce this DOM structure:

<div class="x-tab-panel-body x-tab-panel-body-top" style="height: 467px; width: 626px;">
  <div id="0" style="overflow: hidden; width: auto; height: 467px; position: relative;">
    <div id="x-auto-19" class=" x-border-layout-ct" style="overflow: hidden; width: 100%; height: 100%; position: relative;">
      <div id="x-auto-29" class="x-layout-collapsed x-panel " style="overflow: hidden; height: 465px; visibility: visible; position: absolute; left: 0px; top: 0px; width: 624px;">
        <div class="x-panel-header" style="cursor: default;">
          <div id="x-auto-28" class=" x-nodrag x-tool-null x-tool"/>
          <span class="x-pnael-header-text"/>
        </div>
      </div>
    </div>
  </div>
</div>

instead of this:

<div class="x-tab-panel-body x-tab-panel-body-top" style="height: 467px; width: 626px;">
  <div id="0" style="overflow: hidden; width: auto; height: 467px; position: relative;">
    <div id="x-auto-19" class=" x-border-layout-ct" style="overflow: hidden; width: 100%; height: 100%; position: relative;">
      <div id="x-auto-34" class="x-layout-collapsed x-panel " style="overflow: hidden; height: 465px; visibility: visible; position: absolute; display: block; left: 0px; top: 0px; width: 22px;">
        <div class="x-panel-header" style="cursor: default;">
          <div id="x-auto-33" class=" x-nodrag x-tool-right x-tool"/>
          <span class="x-pnael-header-text"/>
        </div>
      </div>
      <div id="x-auto-28" class=" x-panel" style="overflow: hidden; position: absolute; left: 29px; top: 0px; width: 597px; height: 467px;">
        <div id="x-auto-26" class=" x-small-editor x-panel-header" style="display: none;">
          <div id="x-auto-24" class=" x-icon-btn x-nodrag x-panel-inline-icon" style="cursor: default; float: left; display: none;"/>
          <div id="x-auto-25" class=" x-panel-toolbar" style="overflow: visible;">
            <table cellspacing="0" cellpadding="0">
              <tbody>
              </tbody>
            </table>
          </div>
          <span class="x-panel-header-text">View Sales</span>
        </div>
        <div class="x-panel-bwrap">
          <div class="x-panel-tbar x-panel-tbar-noheader">
            <div id="x-auto-27" class=" x-form-label" style="position: static;"/>
          </div>
          <div class="x-panel-body x-panel-body-noheader" style="overflow: hidden; width: 595px; height: 460px; position: relative;">
        </div>
        <div class="x-panel-footer x-panel-nofooter"/>
      </div>
    </div>
  </div>
</div>

I know my description is vague at best -- but this bug has got me completely confused! All I can say additionally is that the problem does _no longer appear_ in GXT 2.0.1 -- unfortunatley, updating is not an option right now.

Any help would greatly be appreciated!
TIA,
Philipp

[sven]

There are panels missing. You probably havent added the panels to the container of the borderlayout.

[Beren77]

Just to be clear: It is always the same source code that is being executed. Most of the time it works, sometimes, it does not...
I know that some panels are missing, but I know (I debugged it) that always the same Java code is being executed.

[Arno.Nyhm]

I tried to reproduce the problem by writing a small application that does essentially the same, but without our complex-server logic, but the problem -- naturally -- does not appear in that small program.
However, if I comment out all server-interaction, the problem still appears in our web-application.

maybe if you post the code of your small programm it shows some bottlenecks...

[Beren77]

Sure... But beware, it still is pretty large . Thanks for trying!!

package com.tensegrity.blueview.client;

import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.Style.Scroll;
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.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
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.MarginData;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class BlueViewBug implements EntryPoint {
    private ContentPanel editorpanel;
    private LayoutContainer viewport;
    private static Viewport contentPane = null;
    
    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        contentPane = new Viewport();
        contentPane.setMonitorWindowResize(true);
        contentPane.setSize("100%", "100%");
        RootPanel.get().add(contentPane);

        String par = Window.Location.getParameter("options");
        boolean hideTitle = false;
        boolean hideToolbar = false;
        if (par != null) {
            hideToolbar = par.indexOf("htb") != -1;
            hideTitle   = par.indexOf("hti") != -1;
        }
        RowLayout layout = new RowLayout();
        ContentPanel content = new ContentPanel(layout);
        content.setBodyBorder(false);
        content.setHeaderVisible(false);
        content.setCollapsible(false);        
        content.setScrollMode(Scroll.AUTO);
                        
        final boolean ht = hideTitle;
        TabPanel panel = new TabPanel(){
            protected void onRender(Element target, int index) {
                super.onRender(target, index);
                if (ht) {
                    el().getChild(0).removeFromParent();
                }
            }
        };        
        panel.setTabScroll(true);
        content.add(panel, new RowData(1, 1));
        
        editorpanel = new ContentPanel();
        editorpanel.setHeaderVisible(true);
        editorpanel.setHeading("Views");
        editorpanel.setMonitorWindowResize(true);
        editorpanel.setLayoutOnChange(true);
        editorpanel.setLayout(new RowLayout());

        viewport = new LayoutContainer();
        viewport.setSize("100%", "100%");
        viewport.setLayout(new BorderLayout());
        viewport.setMonitorWindowResize(true);

        BorderLayoutData data = new BorderLayoutData(LayoutRegion.CENTER);
        data.setMinSize(200);
        data.setMargins(new Margins(5));
        viewport.add(editorpanel, data);
        
        contentPane.setVisible(false);
        contentPane.removeAll();
        
        contentPane.add(viewport, new MarginData(0));
        contentPane.setVisible(true);
        contentPane.layout();
        
        editorpanel.add(content, new RowData(1, 1));        
        
        TabItem item = new TabItem("View");
        item.setLayoutOnChange(true);
        item.setLayout(new RowLayout());
        item.setText("View");
        item.setAutoHeight(true);
        item.setAutoWidth(true);
        item.setDeferHeight(true);
        
        CubeViewEditor cve = new CubeViewEditor(hideToolbar);
        cve.setWidth("100%");
        cve.setHeight("100%");
        item.add(cve);
        cve.initialize();

        item.setId("id0");
        item.setClosable(true);
        
        panel.add(item);
    }
}

package com.tensegrity.blueview.client;

import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.event.BaseEvent;
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.button.Button;
import com.extjs.gxt.ui.client.widget.form.LabelField;
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.RowLayout;
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.ToggleToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Label;

public class CubeViewEditor extends LayoutContainer {
    private final boolean hideToolbar;
    
    public CubeViewEditor(boolean hideToolbar) {
        this.hideToolbar = hideToolbar;
        setLayout(new BorderLayout());
        setMonitorWindowResize(true);    
    }
    
    public void initialize() {
        initDimensionPanel();
        initViewPanel();        
    }
    
    private final void initViewPanel() {
        BorderLayoutData layoutData = new BorderLayoutData(LayoutRegion.CENTER);
        layoutData.setSize(1.0f);
        layoutData.setCollapsible(false);
        layoutData.setFloatable(false);
        layoutData.setHidden(false);
        ContentPanel viewPanel = new ContentPanel();
        viewPanel.clearState();
        viewPanel.setLayout(new RowLayout());
        viewPanel.setCollapsible(false);
        viewPanel.setHideCollapseTool(true);
        viewPanel.setHeading("View test");
        
        ToolBar toolbar = new ToolBar();
        TextToolItem save = new TextToolItem();
        save.setId("SAVE");
        save.setIconStyle("ten-icons-save");
        save.setToolTip("Save view");
        
        TextToolItem saveAs = new TextToolItem();
        saveAs.setId("SAVE_AS");
        saveAs.setIconStyle("ten-icons-save-as");
        saveAs.setToolTip("Save view as...");
        
        TextToolItem print = new TextToolItem();
        print.setId("PRINT");
        print.setIconStyle("ten-icons-print");
        print.setToolTip("Print view");
        
        ToggleToolItem hideEmptyCells = new ToggleToolItem();
        hideEmptyCells.setId("HIDE_EMPTY");
        hideEmptyCells.setIconStyle("ten-icons-hideEmpty");
        hideEmptyCells.setToolTip("Hide empty rows and columns");
        toolbar.add(hideEmptyCells);
        
        ToggleToolItem reverseColumns = new ToggleToolItem();
        reverseColumns.setId("REV_COLS");
        reverseColumns.setIconStyle("ten-icons-reverseCols");
        reverseColumns.setToolTip("Reverse display of expanded columns");
        toolbar.add(reverseColumns);
        // ~
        ToggleToolItem reverseRows = new ToggleToolItem();
        reverseRows.setId("REV_ROWS");
        reverseRows.setIconStyle("ten-icons-reverseRows");
        reverseRows.setToolTip("Reverse display of expanded rows");
        toolbar.add(reverseRows);        
        
        ToggleToolItem showRules = new ToggleToolItem();
        showRules.setId("SHOW_RULES");
        showRules.setIconStyle("ten-icons-viewRules");
        showRules.setToolTip("Mark cells that include rules");
        toolbar.add(showRules);
        
        toolbar.add(new SeparatorToolItem());
        TextToolItem txtItem = new TextToolItem();
        txtItem.setId("REFRESH");
        txtItem.setIconStyle("icon-refresh-on");
        txtItem.setToolTip("Refresh data");
        toolbar.add(txtItem);

        
        if (hideToolbar) {
            viewPanel.setTopComponent(new LabelField(""));
        } else {
            viewPanel.setTopComponent(toolbar);
        }
        viewPanel.setHeaderVisible(false);
        
        viewPanel.setLayoutData(viewPanel, layoutData);        
        add(viewPanel, new BorderLayoutData(LayoutRegion.CENTER));
        viewPanel.expand();
    }
    
    private final void initRepositoryContainer() {
        AbsolutePanel repositoryContainer = new AbsolutePanel();
        repositoryContainer.setStyleName("static-filter");
        Label emptyLabel = new Label("Drop to fill static filters");
        emptyLabel.setStyleName("empty-label");
        DOM.setStyleAttribute(emptyLabel.getElement(), "textAlign", "center");
        
    }
    
    private final void initDimensionPanel() {
        BorderLayoutData dimRepoLayoutData = new BorderLayoutData(LayoutRegion.WEST);
        dimRepoLayoutData.setMargins(new Margins(0,5,0,0));
        dimRepoLayoutData.setSplit(true);
        dimRepoLayoutData.setCollapsible(true);
        dimRepoLayoutData.setFloatable(false); //true);
        dimRepoLayoutData.setSize(160);
        dimRepoLayoutData.setMinSize(40);
        dimRepoLayoutData.setMinSize(220);
        ContentPanel dimRepository = new ContentPanel();
        dimRepository.setLayoutOnChange(true);
        dimRepository.setScrollMode(Scroll.AUTOY);
        dimRepository.setLayout(new RowLayout(Orientation.VERTICAL));
        dimRepository.setHeight("100%");
        dimRepository.setData("layout_region", LayoutRegion.WEST);
        dimRepository.sinkEvents(Events.BeforeExpand);
        dimRepository.addListener(Events.BeforeExpand, new Listener(){
            public void handleEvent(BaseEvent be) {
                be.doit = false;
            }
        });
        dimRepository.setVisible(false);
        initRepositoryContainer();
    }
    
}

[niyioyelade]

I have also noticed this intermittent problem on GWT 2.4 + GXT 2.2.4 running on Firefox 7.0.1.

Did you find a fix for it?

[Beren77]

Unfortunately, I haven't.
And I can't reproduce the issue (at least not reliably... It occurs occasionally).

[niyioyelade]

It happens once in 20 times or so. For me, the left hand panel (border layout west) where this problem occurs is collapsed by default. Comparing the div structure to an occassion where it all works normally, I find that all the panels seem to be there in the div structure but some have style="display none". When I remove this style from the firebug HTML editor, the invisible/hidden panels show up. I am wondering why this style is being set in the first instance (and unpredictably too!!).

[niyioyelade]

This problem only happened in cases where the panel in question is collapsed by default. You see the blank screen when you click the panel header (vertical header for east and west border layout panels) or you miss the collapse button slightly. The collapse had been done before the content was actually rendered/drawn. Clicking "preview" then previews an empty panel.
My solution was to delay collapsing until after rendering. This I achieved with the scheduled command for example:
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
@Override
public void execute() {
//collapse east and west by default
layout.collapse(LayoutRegion.WEST);
layout.collapse(LayoutRegion.EAST);
}
});

It may be trickier in your architecture if you do not have the information about which one needs collapsing at the point of creating the layouts.