Portlets don't resize into different size columns inside Portal

**Neilcoder** · 21 Jun 2012, 3:38 AM

Required Information

Version(s) of Ext GWT
�Ext GWT 3.0 Release Candidate�

Browser versions and OS
(and desktop environment, if applicable)

�Chrome 17, Windows XP, Aston Shell�

Virtual Machine
No

Description
Portlets don't resize when moved to a different sized column inside portal. Pictures will explain this below. Portal is added inside of a TabPanel.

Run mode
development mode

Steps to reproduce the problem

</i>
Create a TabPanel
Add the PortalLayoutContainerExample from the examples, add it to a tab on the tab panel
e.g.: PortalLayoutContainerExample myPortal = new PortalLayoutContainerExample();
tabPanel.add(myPortal.asWidget(), new TabItemConfig("PortalLayoutContainerExample",true));
run this code and play around with moving the portlets

Expected result
portlets should resize to the different columns in the Portal

Actual result
portlets sometimes resize, sometimes don't

Test case

Code:

package com.example.demo.client;


import java.util.Iterator;

import com.example.demo.client.MainToolBar.StockProperties;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.layout.client.Layout;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.core.client.Style.LayoutRegion;
import com.sencha.gxt.core.client.util.Margins;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.examples.resources.client.Resources;
import com.sencha.gxt.examples.resources.client.TestData;
import com.sencha.gxt.examples.resources.client.model.Stock;
import com.sencha.gxt.explorer.client.grid.FilterGridExample;
import com.sencha.gxt.explorer.client.layout.HBoxLayoutExample;
import com.sencha.gxt.explorer.client.model.Example.Detail;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.TabItemConfig;
import com.sencha.gxt.widget.core.client.TabPanel;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.button.ToggleButton;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData;
import com.sencha.gxt.widget.core.client.container.MarginData;
import com.sencha.gxt.widget.core.client.container.SimpleContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
import com.sencha.gxt.widget.core.client.container.Viewport;
import com.sencha.gxt.widget.core.client.event.SelectEvent;
import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
import com.sencha.gxt.widget.core.client.info.Info;
import com.sencha.gxt.widget.core.client.menu.CheckMenuItem;
import com.sencha.gxt.widget.core.client.menu.Item;
import com.sencha.gxt.widget.core.client.menu.Menu;
import com.sencha.gxt.widget.core.client.menu.MenuItem;
import com.sencha.gxt.widget.core.client.menu.SeparatorMenuItem;
import com.sencha.gxt.widget.core.client.toolbar.FillToolItem;
import com.sencha.gxt.widget.core.client.toolbar.SeparatorToolItem;
import com.sencha.gxt.widget.core.client.toolbar.ToolBar;



public class ApplicationMockNoToolBar implements IsWidget, EntryPoint {
    

    
      private VerticalPanel vp;
      private TabPanel tabPanel;
      private int index = 0;
      private ToolBar toolBar;
    
    
  public Widget asWidget() {
      
      createTabPanel();
    

    final BorderLayoutContainer con = new BorderLayoutContainer();
    con.setBorders(true);

    ContentPanel north = new ContentPanel();
    ContentPanel west = new ContentPanel();
    ContentPanel center = new ContentPanel();


    ViewTabPanel myViewTabPanel = new ViewTabPanel();

    ContentPanel east = new ContentPanel();
    ContentPanel south = new ContentPanel();
    south.setHeadingText("Notifications");

    
    BottomFilterGrid myBottomFilterGrid = new BottomFilterGrid();
    
    south.add(myBottomFilterGrid.asWidget());

    MarginData centerData = new MarginData();

    BorderLayoutData southData = new BorderLayoutData();
    southData.setMargins(new Margins(5));
    southData.setCollapsible(true);
    southData.setCollapseMini(true);


    con.setCenterWidget(tabPanel, centerData);

    con.setSouthWidget(south, southData);

    VerticalLayoutContainer simple = new VerticalLayoutContainer();
   

    simple.add(con, new VerticalLayoutData(1, 1));

    return simple;
  }
  


  public TabPanel createTabPanel( ){
        if (vp == null) {
            vp = new VerticalPanel();
            vp.setSpacing(10);

            HorizontalPanel hp = new HorizontalPanel();
            hp.setSpacing(5);

            ToggleButton toggle = new ToggleButton("Enable Tab Context Menu");

            hp.add(toggle);
            vp.add(hp);

            tabPanel = new TabPanel();
            tabPanel.setAnimScroll(true);
            tabPanel.setTabScroll(true);
            tabPanel.setCloseContextMenu(true);

            toggle.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
              @Override
              public void onValueChange(ValueChangeEvent<Boolean> event) {
                tabPanel.setCloseContextMenu(event.getValue());
              }
            });
            toggle.setValue(true);

            DashboardView myDashboardView = new DashboardView();
            IconView myIconView = new IconView();
            
            Widget myDashBoardWidget = myDashboardView.asWidget();            
            myDashBoardWidget.setTitle("Dashboard");
            tabPanel.add(myDashBoardWidget, new TabItemConfig("Dashboard",false));   
            
            Widget myIconViewidget = myIconView.asWidget();            
            myIconViewidget.setTitle("Icons");            
            tabPanel.add(myIconViewidget, new TabItemConfig("Icons",false));      
          
            PortalLayoutContainerExample myPortal = new PortalLayoutContainerExample();
            tabPanel.add(myPortal.asWidget(), new TabItemConfig("PortalLayoutContainerExample",true));                    
            
             

          }
          return tabPanel;      
  }
  
  private void addTab(String tabName) {
    Label item = new Label(tabName + " " + (index + 1));
    item.addStyleName("pad-text");
    
    VerificationView verification = new VerificationView();
    Widget myWidget = verification.asWidget();
    myWidget.setTitle(tabName);
    tabPanel.add(myWidget, new TabItemConfig(tabName, true));
    tabPanel.setActiveWidget(myWidget);

  }
  
  
  public void onModuleLoad() {
    Widget con = asWidget();
    Viewport viewport = new Viewport();
    viewport.add(con);
    RootPanel.get().add(viewport);
  }

}


////and another class

package com.example.demo.client;


import java.util.Iterator;

import com.example.demo.client.MainToolBar.StockProperties;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.layout.client.Layout;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.core.client.Style.LayoutRegion;
import com.sencha.gxt.core.client.util.Margins;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.examples.resources.client.Resources;
import com.sencha.gxt.examples.resources.client.TestData;
import com.sencha.gxt.examples.resources.client.model.Stock;
import com.sencha.gxt.explorer.client.grid.FilterGridExample;
import com.sencha.gxt.explorer.client.layout.HBoxLayoutExample;
import com.sencha.gxt.explorer.client.model.Example.Detail;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.TabItemConfig;
import com.sencha.gxt.widget.core.client.TabPanel;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.button.ToggleButton;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData;
import com.sencha.gxt.widget.core.client.container.MarginData;
import com.sencha.gxt.widget.core.client.container.SimpleContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
import com.sencha.gxt.widget.core.client.container.Viewport;
import com.sencha.gxt.widget.core.client.event.SelectEvent;
import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
import com.sencha.gxt.widget.core.client.info.Info;
import com.sencha.gxt.widget.core.client.menu.CheckMenuItem;
import com.sencha.gxt.widget.core.client.menu.Item;
import com.sencha.gxt.widget.core.client.menu.Menu;
import com.sencha.gxt.widget.core.client.menu.MenuItem;
import com.sencha.gxt.widget.core.client.menu.SeparatorMenuItem;
import com.sencha.gxt.widget.core.client.toolbar.FillToolItem;
import com.sencha.gxt.widget.core.client.toolbar.SeparatorToolItem;
import com.sencha.gxt.widget.core.client.toolbar.ToolBar;



public class ApplicationMockNoToolBar implements IsWidget, EntryPoint {
    

    
      private VerticalPanel vp;
      private TabPanel tabPanel;
      private int index = 0;
      private ToolBar toolBar;
    
    
  public Widget asWidget() {
      
      createTabPanel();
    

    final BorderLayoutContainer con = new BorderLayoutContainer();
    con.setBorders(true);

    ContentPanel north = new ContentPanel();
    ContentPanel west = new ContentPanel();
    ContentPanel center = new ContentPanel();


    ViewTabPanel myViewTabPanel = new ViewTabPanel();

    ContentPanel east = new ContentPanel();
    ContentPanel south = new ContentPanel();
    south.setHeadingText("Notifications");

    
    BottomFilterGrid myBottomFilterGrid = new BottomFilterGrid();
    
    south.add(myBottomFilterGrid.asWidget());

    MarginData centerData = new MarginData();

    BorderLayoutData southData = new BorderLayoutData();
    southData.setMargins(new Margins(5));
    southData.setCollapsible(true);
    southData.setCollapseMini(true);


    con.setCenterWidget(tabPanel, centerData);

    con.setSouthWidget(south, southData);

    VerticalLayoutContainer simple = new VerticalLayoutContainer();
   

    simple.add(con, new VerticalLayoutData(1, 1));

    return simple;
  }
  


  public TabPanel createTabPanel( ){
        if (vp == null) {
            vp = new VerticalPanel();
            vp.setSpacing(10);

            HorizontalPanel hp = new HorizontalPanel();
            hp.setSpacing(5);

            ToggleButton toggle = new ToggleButton("Enable Tab Context Menu");

            hp.add(toggle);
            vp.add(hp);

            tabPanel = new TabPanel();
            tabPanel.setAnimScroll(true);
            tabPanel.setTabScroll(true);
            tabPanel.setCloseContextMenu(true);

            toggle.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
              @Override
              public void onValueChange(ValueChangeEvent<Boolean> event) {
                tabPanel.setCloseContextMenu(event.getValue());
              }
            });
            toggle.setValue(true);

            DashboardView myDashboardView = new DashboardView();
            IconView myIconView = new IconView();
            
            Widget myDashBoardWidget = myDashboardView.asWidget();            
            myDashBoardWidget.setTitle("Dashboard");
            tabPanel.add(myDashBoardWidget, new TabItemConfig("Dashboard",false));   
            
            Widget myIconViewidget = myIconView.asWidget();            
            myIconViewidget.setTitle("Icons");            
            tabPanel.add(myIconViewidget, new TabItemConfig("Icons",false));      
          
            PortalLayoutContainerExample myPortal = new PortalLayoutContainerExample();
            tabPanel.add(myPortal.asWidget(), new TabItemConfig("PortalLayoutContainerExample",true));                    
            
             

          }
          return tabPanel;      
  }
  
  private void addTab(String tabName) {
    Label item = new Label(tabName + " " + (index + 1));
    item.addStyleName("pad-text");
    
    VerificationView verification = new VerificationView();
    Widget myWidget = verification.asWidget();
    myWidget.setTitle(tabName);
    tabPanel.add(myWidget, new TabItemConfig(tabName, true));
    tabPanel.setActiveWidget(myWidget);

  }
  
  
  public void onModuleLoad() {
    Widget con = asWidget();
    Viewport viewport = new Viewport();
    viewport.add(con);
    RootPanel.get().add(viewport);
  }

}


///and another class same as from the examples


/**
 * Sencha GXT 3.0.0 - Sencha for GWT
 * Copyright(c) 2007-2012, Sencha, Inc.
 * licensing@sencha.com
 *
 * http://www.sencha.com/products/gxt/license/
 */
package com.example.demo.client;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.DateCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.examples.resources.client.ExampleStyles;
import com.sencha.gxt.examples.resources.client.TestData;
import com.sencha.gxt.examples.resources.client.model.Stock;
import com.sencha.gxt.examples.resources.client.model.StockProperties;
import com.sencha.gxt.explorer.client.model.Example.Detail;
import com.sencha.gxt.widget.core.client.Portlet;
import com.sencha.gxt.widget.core.client.button.ToolButton;
import com.sencha.gxt.widget.core.client.container.PortalLayoutContainer;
import com.sencha.gxt.widget.core.client.event.SelectEvent;
import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;
import com.sencha.gxt.widget.core.client.tips.QuickTip;


public class PortalLayoutContainerExample implements IsWidget, EntryPoint {
     
      private static final StockProperties props = GWT.create(StockProperties.class);
      private PortalLayoutContainer portal;
     
      @Override
      public Widget asWidget() {
        if (portal == null) {
          portal = new PortalLayoutContainer(3);
          portal.getElement().getStyle().setBackgroundColor("white");
          portal.setColumnWidth(0, .40);
          portal.setColumnWidth(1, .30);
          portal.setColumnWidth(2, .30);
     
          Portlet portlet = new Portlet();
          portlet.setHeadingText("Grid in a Portlet");
          configPanel(portlet);
          portlet.add(createGrid());
          portlet.setHeight(250);
          portal.add(portlet, 0);
     
          portlet = new Portlet();
          portlet.setHeadingText("Another Panel 1");
          configPanel(portlet);
          portlet.add(getBogusText());
          portal.add(portlet, 0);
     
          portlet = new Portlet();
          portlet.setHeadingText("Panel 2");
          configPanel(portlet);
          portlet.add(getBogusText());
          portal.add(portlet, 1);
     
          portlet = new Portlet();
          portlet.setHeadingText("Another Panel 2");
          configPanel(portlet);
          portlet.add(getBogusText());
          portal.add(portlet, 1);
        }
        return portal;
      }
     
      public Widget createGrid() {
        final NumberFormat number = NumberFormat.getFormat("0.00");
     
        ColumnConfig<Stock, String> nameCol = new ColumnConfig<Stock, String>(props.name(), 200, "Company");
        ColumnConfig<Stock, String> symbolCol = new ColumnConfig<Stock, String>(props.symbol(), 100, "Symbol");
        ColumnConfig<Stock, Double> lastCol = new ColumnConfig<Stock, Double>(props.last(), 75, "Last");
     
        ColumnConfig<Stock, Double> changeCol = new ColumnConfig<Stock, Double>(props.change(), 100, "Change");
        changeCol.setCell(new AbstractCell<Double>() {
     
          @Override
          public void render(Context context, Double value, SafeHtmlBuilder sb) {
            String style = "style='color: " + (value < 0 ? "red" : "green") + "'";
            String v = number.format(value);
            sb.appendHtmlConstant("<span " + style + " qtitle='Change' qtip='" + v + "'>" + v + "</span>");
          }
        });
     
        ColumnConfig<Stock, Date> lastTransCol = new ColumnConfig<Stock, Date>(props.lastTrans(), 100, "Last Updated");
        lastTransCol.setCell(new DateCell(DateTimeFormat.getFormat("MM/dd/yyyy")));
     
        List<ColumnConfig<Stock, ?>> l = new ArrayList<ColumnConfig<Stock, ?>>();
        l.add(nameCol);
        l.add(symbolCol);
        l.add(lastCol);
        l.add(changeCol);
        l.add(lastTransCol);
        ColumnModel<Stock> cm = new ColumnModel<Stock>(l);
     
        ListStore<Stock> store = new ListStore<Stock>(props.key());
        store.addAll(TestData.getStocks());
     
        final Grid<Stock> grid = new Grid<Stock>(store, cm);
        grid.getView().setAutoExpandColumn(nameCol);
        grid.setBorders(true);
        grid.getView().setStripeRows(true);
        grid.getView().setColumnLines(true);
     
        // needed to enable quicktips (qtitle for the heading and qtip for the
        // content) that are setup in the change GridCellRenderer
        new QuickTip(grid);
     
        return grid;
      }
     
      @Override
      public void onModuleLoad() {
        RootPanel.get().add(this);
      }
     
      private void configPanel(final Portlet panel) {
        panel.setCollapsible(true);
        panel.setAnimCollapse(false);
        panel.getHeader().addTool(new ToolButton(ToolButton.GEAR));
        panel.getHeader().addTool(new ToolButton(ToolButton.CLOSE, new SelectHandler() {
     
          @Override
          public void onSelect(SelectEvent event) {
            panel.removeFromParent();
          }
        }));
      }
     
      private HTML getBogusText() {
        HTML html = new HTML(TestData.DUMMY_TEXT_SHORT);
        html.addStyleName(ExampleStyles.get().paddedText());
        return html;
      }
     
    }

Helpful Information

Screenshot or video

portlet-problem.jpg

Thread: Portlets don't resize into different size columns inside Portal

Thread Tools

Search Thread

Display

Threaded View

Portlets don't resize into different size columns inside Portal

Tags for this Thread

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News