Thank you for reporting this bug. We will make it our priority to review this report.
  1. 21 Jun 2012 3:38 AM #1
    Neilcoder
    Neilcoder is offline
    Sencha Premium Member Neilcoder's Avatar
    Join Date
    Apr 2011
    Location
    Ireland
    Posts
    206
    Vote Rating
    0
    Neilcoder is on a distinguished road
      0  

    Default Portlets don't resize into different size columns inside Portal

    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
    1. Create a TabPanel
    2. Add the PortalLayoutContainerExample from the examples, add it to a tab on the tab panel
    3. e.g.: PortalLayoutContainerExample myPortal = new PortalLayoutContainerExample();
      tabPanel.add(myPortal.asWidget(), new TabItemConfig("PortalLayoutContainerExample",true));
    4. 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
    http://neiliscoding.blogspot.com/
    Reply With Quote Reply With Quote
  2. 21 Jun 2012 5:55 AM #2
    goodcoresoft
    goodcoresoft is offline
    Sencha User
    Join Date
    Jun 2012
    Posts
    1
    Vote Rating
    0
    goodcoresoft is on a distinguished road
      0  

    Default


    hi Neilcoder i am facing the same problem, if you find any soluttion tell me plz.
    Offshore Software Development Company | PHP Zend Developer | Android Developer For Hire | Android Development Company
    Reply With Quote Reply With Quote
  3. 21 Jun 2012 6:17 AM #3
    Neilcoder
    Neilcoder is offline
    Sencha Premium Member Neilcoder's Avatar
    Join Date
    Apr 2011
    Location
    Ireland
    Posts
    206
    Vote Rating
    0
    Neilcoder is on a distinguished road
      0  

    Default


    @goodcoresoft - Will do!
    http://neiliscoding.blogspot.com/
    Reply With Quote Reply With Quote
  4. 1 Apr 2013 6:05 AM #4
    Vasily.R
    Vasily.R is offline
    Sencha User
    Join Date
    Mar 2009
    Posts
    19
    Vote Rating
    1
    Vasily.R is on a distinguished road
      0  

    Default


    Hi guys, I have the same problem and it's painful Did you found a solution?
    Reply With Quote Reply With Quote

Tags for this Thread