[CLOSED] Beta4: LayoutContainer scrolls only ContentPanels but not its widgets

[flow]

Hi,
I added a FormPanel into a normal LayoutContainer using the FitLayout.
If I resize the window, so that the FormPanel cannot be displayed anymore, the scrollbars appear.
Strange effect: on scrolling, only the FormPanel scrolls, but its widgets (here a TextField) remains on the spot.


package com.soko.multibase.client;

import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.widget.HorizontalPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.FormPanel.LabelAlign;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*
* @author huber, itestra GmbH
* @version $Id: ClientTest.java,v 1.2 2008/06/04 16:20:10 huber Exp $
*/
public class ClientTest extends LayoutContainer implements EntryPoint {

/**
* This is the entry point method.
*/
public void onModuleLoad() {
final Viewport v = new Viewport();
v.add(this);
v.layout();
v.setLayout(new FitLayout());
RootPanel.get().add(v);
}

public ClientTest() {
setData("layout", new FitLayout());
setScrollMode(Scroll.AUTO);

final FormPanel propertiesFormPanel = new FormPanel();
propertiesFormPanel.setHeading("Basics");
propertiesFormPanel.setFieldWidth(200);
propertiesFormPanel.setLabelWidth(200);
propertiesFormPanel.setLabelAlign(LabelAlign.RIGHT);
propertiesFormPanel.setBorders(false);
propertiesFormPanel.setFrame(true);
propertiesFormPanel.setWidth(500);
propertiesFormPanel.setHeight(300);

final TextField<String> textField = new TextField<String>();
textField.setFieldLabel("Description");
textField.setEnabled(false);
textField.setReadOnly(true);
propertiesFormPanel.add(textField);

final HorizontalPanel horizontalPanel = new HorizontalPanel();
horizontalPanel.add(propertiesFormPanel);
add(horizontalPanel);
}
}

[flow]

This only occurs in the hosted mode, IE6 and IE7

[flow]

Good morning,

has this bug been fixed already?
Cheers,
Flow

[jraue]

+1, same effect here.

[jraue]

Actually, there is even one more glitch showing when rendering items in a scrollable layout container, see attachment.

Cheers,
Joachim

[darrellmeyer]

There are a few problems with your code. First:


setData("layout", new FitLayout());That code does nothing. This is used in the Explorer Demo to "pass" a layout to the pages parent. I have added comments to all places where this code exists to make sure you understand that the code is for the demo only. Second: the FitLayout and HorizontalPanel are not needed. The default is a FlowLayout which is what you want.

Try this code:


public void onModuleLoad() {
Viewport v = new Viewport();
v.setScrollMode(Scroll.AUTO);

final FormPanel propertiesFormPanel = new FormPanel();
propertiesFormPanel.setHeading("Basics");
propertiesFormPanel.setFieldWidth(200);
propertiesFormPanel.setLabelWidth(200);
propertiesFormPanel.setLabelAlign(LabelAlign.RIGHT);
propertiesFormPanel.setBorders(false);
propertiesFormPanel.setFrame(true);
propertiesFormPanel.setWidth(500);
propertiesFormPanel.setHeight(300);

final TextField<String> textField = new TextField<String>();
textField.setFieldLabel("Description");
textField.setEnabled(false);
textField.setReadOnly(true);
propertiesFormPanel.add(textField);

v.add(propertiesFormPanel);

RootPanel.get().add(v);
}

[flow]

Hi Darrell,
thanks for you explicit reply. Your code works well.
In my particular case, I put several ContentPanels and FormPanels inside a TabItem, which I want to be able to scroll.
For the layout of the ContentPanels I use a combination of VerticalPanels and HorizontalPanels (thus the code in my example).
By setting the TabItem#setScrollMode(Scroll.AUTO) I would expect the scrolling to work. But as I mentioned below, only the ContentPanels scroll (widgets remain, where they are).

I tried to simplify my code. The HorizontalPanel is scrollable, but in this case, only the ContentPanels scroll.
Thanks for your advice.



public void onModuleLoad() {
final Viewport v = new Viewport();

final VerticalPanel verticalPropertyPanel = new VerticalPanel();
verticalPropertyPanel.setSpacing(0);

// FormPanel of Product-Properties
final FormPanel propertiesFormPanel = new FormPanel();
propertiesFormPanel.setHeading("Props");
propertiesFormPanel.setFieldWidth(200);
propertiesFormPanel.setLabelWidth(200);
propertiesFormPanel.setLabelAlign(LabelAlign.RIGHT);
propertiesFormPanel.setBorders(false);
propertiesFormPanel.setFrame(true);
propertiesFormPanel.setWidth(500);

final Field<String> prodIdSelectionField = new TriggerField<String>();
prodIdSelectionField.setFieldLabel("id");
prodIdSelectionField.setEnabled(false);
prodIdSelectionField.setReadOnly(true);
propertiesFormPanel.add(prodIdSelectionField);

final TextField<String> descriptionShort010TextField = new TextField<String>();
descriptionShort010TextField.setFieldLabel("Dummy");
descriptionShort010TextField.setMaxLength(70);
propertiesFormPanel.add(descriptionShort010TextField);

verticalPropertyPanel.add(propertiesFormPanel);

final ContentPanel defaultFeaturePanel = new ContentPanel();
defaultFeaturePanel.setHeading("Default");
defaultFeaturePanel.setBorders(false);
defaultFeaturePanel.setFrame(true);
defaultFeaturePanel.setWidth(500);
final TableLayout defaultFeaturePanelLayout = new TableLayout(2);
defaultFeaturePanelLayout.setCellSpacing(0);
defaultFeaturePanelLayout.setCellPadding(2);
defaultFeaturePanelLayout.setWidth("100%");
defaultFeaturePanel.setLayout(defaultFeaturePanelLayout);
final TableData tableDataLabel = new TableData();
tableDataLabel.setWidth(String.valueOf(200));
final TableData tableDataValue = new TableData();
tableDataValue.setWidth(String.valueOf(200));
verticalPropertyPanel.add(defaultFeaturePanel);

final ContentPanel richTextAreaPanel = new ContentPanel();
richTextAreaPanel.setBorders(false);
richTextAreaPanel.setFrame(true);
richTextAreaPanel.setScrollMode(Style.Scroll.AUTO);
richTextAreaPanel.setWidth(450);
richTextAreaPanel.setLayout(new TableLayout(1));
richTextAreaPanel.setHeading("Dummy");
final RichTextArea descriptionLongRichTextArea = new RichTextArea();

descriptionLongRichTextArea.setTabIndex(2);
descriptionLongRichTextArea.setSize("400px", "230px");
richTextAreaPanel.add(descriptionLongRichTextArea);

final HorizontalPanel horizontalPanel = new HorizontalPanel();
// this should make the horizontalPanel scrollable. But weird behaviour occurs.
horizontalPanel.setScrollMode(Scroll.AUTO);
horizontalPanel.setSpacing(7);
horizontalPanel.add(verticalPropertyPanel);
horizontalPanel.add(richTextAreaPanel);

v.add(horizontalPanel);
RootPanel.get().add(v);
}

[darrellmeyer]

The HorizontalPanel will not scroll as its size grows to the size of its content. Try setting a border on the panel and you will see what I am talking about. With your code, you could enabled scrolling on the viewport.