PDA

View Full Version : [Solved] [IE] Can not update chart model when model is not visible



Aldehan
17 Jun 2010, 6:00 AM
- 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.



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.

sven
17 Jun 2010, 6:04 AM
Change the hidemode of the tabitem to HideMode.OFFSETS.

Aldehan
17 Jun 2010, 6:53 AM
Thanks a lot.