1. #1
    Sencha User Aldehan's Avatar
    Join Date
    Jun 2010
    Location
    Paris
    Posts
    10
    Vote Rating
    0
    Aldehan is on a distinguished road

      0  

    Default [Solved] [IE] Can not update chart model when model is not visible

    [Solved] [IE] Can not update chart model when model is not visible


    - GXT version : 2.1.3
    - GWT version : 2.0.3
    - both host and web mode
    - browser : tested with IE 6,7,8

    I have got a TabPanel which displays a chart in one of the TabItems.
    If I trigger a chart model update when chart is not visible, displaying chart (by clicking on chart tab) result in a compressed chart as the screenshot shows.


    Code:
    import java.util.ArrayList;
    import java.util.List;
    
    import com.extjs.gxt.charts.client.Chart;
    import com.extjs.gxt.charts.client.model.ChartModel;
    import com.extjs.gxt.charts.client.model.charts.BarChart;
    import com.extjs.gxt.charts.client.model.charts.BarChart.BarStyle;
    import com.extjs.gxt.ui.client.Style.Orientation;
    import com.extjs.gxt.ui.client.event.ButtonEvent;
    import com.extjs.gxt.ui.client.event.Events;
    import com.extjs.gxt.ui.client.event.SelectionListener;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.TabItem;
    import com.extjs.gxt.ui.client.widget.TabPanel;
    import com.extjs.gxt.ui.client.widget.button.Button;
    import com.extjs.gxt.ui.client.widget.layout.FitLayout;
    import com.extjs.gxt.ui.client.widget.layout.RowLayout;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    
    public class Test implements EntryPoint {
    
      @Override
      public void onModuleLoad() {
        //initializing chart models
        BarChart bc = new BarChart(BarStyle.GLASS);
        for(int i = 0; i < 5; i ++)
          bc.addBars (new BarChart.Bar(i));
        
        ChartModel model0 = new ChartModel("chart");
        model0.setBackgroundColour("#FF9999");
        model0.addChartConfig (bc);
        
        ChartModel model1 = new ChartModel("chart");
        model1.setBackgroundColour("#99FF99");
        model1.addChartConfig(bc);
        
        final List<ChartModel> models = new ArrayList<ChartModel>();
        models.add(model0);
        models.add(model1);
        
        final IntegerWrapper current = new IntegerWrapper(0);
        
        //creating chart    
        final Chart chart = new Chart("gxt/chart/open-flash-chart.swf");
        chart.setChartModel(models.get(current.get()));
        
        //creating tab panel and tab items
        TabItem chartTabItem = new TabItem();
        chartTabItem.setLayout(new FitLayout());
        chartTabItem.setText("chart tab");
        chartTabItem.add(chart);
        
        TabItem otherTabItem = new TabItem();
        otherTabItem.setLayout(new FitLayout());
        otherTabItem.setText("other tab");
        
        final TabPanel tabPanel = new TabPanel();
        tabPanel.setResizeTabs(true);
        tabPanel.setSize(400, 300);
        tabPanel.setBodyBorder(true);
        tabPanel.setBorderStyle(true);
        
        tabPanel.add(chartTabItem);
        tabPanel.add(otherTabItem);
        
        //creating button   
        Button button = new Button("change model");
        button.addListener(Events.Select, new SelectionListener<ButtonEvent>() {
          @Override
          public void componentSelected(ButtonEvent ce) {
            //switch the chart models when button is clicked
            current.increment();
            chart.setChartModel(models.get(current.get()%models.size()));
          }
        });
        
        //creating container
        LayoutContainer container = new LayoutContainer(new RowLayout (Orientation.VERTICAL));
        container.add(button);
        container.add(tabPanel);
        RootPanel rootPanel = RootPanel.get();
        rootPanel.add(container);
        container.layout();
      }
      
      private static final class IntegerWrapper {
        public IntegerWrapper(int initialValue) {
          value = initialValue; 
        }
        public int get() {
          return value;
        }
        public void increment() {
          value++;
        }
        private int value;
      }
    
    }
    thanks for help.
    Attached Images
    Last edited by Aldehan; 17 Jun 2010 at 6:54 AM. Reason: tag as solved

  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Change the hidemode of the tabitem to HideMode.OFFSETS.

  3. #3
    Sencha User Aldehan's Avatar
    Join Date
    Jun 2010
    Location
    Paris
    Posts
    10
    Vote Rating
    0
    Aldehan is on a distinguished road

      0  

    Default


    Thanks a lot.

Similar Threads

  1. Replies: 5
    Last Post: 4 May 2010, 12:00 PM
  2. Form binding / update model
    By tsegismont in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 2 Apr 2009, 1:22 AM
  3. [1.2.1] FieldBinding on model update problem
    By lichnost in forum Ext GWT: Bugs (1.x)
    Replies: 0
    Last Post: 11 Jan 2009, 1:50 PM
  4. ListStore.update(Model) not update Grid
    By normanmaurer in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 27 Oct 2008, 10:54 PM

Thread Participants: 1