1. #1
    Ext User
    Join Date
    Apr 2008
    Location
    Munich, Germany
    Posts
    43
    Vote Rating
    0
    flow is on a distinguished road

      0  

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

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


    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.
    Code:
    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);
        }
    }

  2. #2
    Ext User
    Join Date
    Apr 2008
    Location
    Munich, Germany
    Posts
    43
    Vote Rating
    0
    flow is on a distinguished road

      0  

    Default


    This only occurs in the hosted mode, IE6 and IE7

  3. #3
    Ext User
    Join Date
    Apr 2008
    Location
    Munich, Germany
    Posts
    43
    Vote Rating
    0
    flow is on a distinguished road

      0  

    Default


    Good morning,

    has this bug been fixed already?
    Cheers,
    Flow

  4. #4
    Ext User
    Join Date
    May 2008
    Posts
    97
    Vote Rating
    0
    jraue is on a distinguished road

      0  

    Default


    +1, same effect here.

  5. #5
    Ext User
    Join Date
    May 2008
    Posts
    97
    Vote Rating
    0
    jraue is on a distinguished road

      0  

    Default


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

    Cheers,
    Joachim
    Attached Images

  6. #6
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    There are a few problems with your code. First:

    Code:
    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:

    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);
      }

  7. #7
    Ext User
    Join Date
    Apr 2008
    Location
    Munich, Germany
    Posts
    43
    Vote Rating
    0
    flow is on a distinguished road

      0  

    Default


    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.

    Code:
    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);
        }

  8. #8
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    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.

Thread Participants: 2