1 Attachment(s)
Portlets don't resize into different size columns inside Portal
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
- 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
