PDA

View Full Version : Dynamically switching contents of a panel



ruchika
13 Oct 2009, 6:13 AM
Hi,
My current screen looks like the screenshot attached below. and the requirement is on click of the buttons on the left and bottom the pie chart should be replaced by a grid or another pie chart or a bar chart. Is there a way to dynamically switch between them?

As of now i have placed the 2 sets of chart and the pie chart in 1 panel. I want to change only the chart from this panel and put the grid or bar chart in its place.

my code for the same is :

var firstPanel = new Ext.Panel({
title: 'Group By: ',
border:true,
renderTo: 'chartGrid',
width: 500,
height:250,
layout:'table',
layoutConfig: {
columns:2 },
items: [btnPan,exchangeChart,btnPan2,btnPan3]
});


here exchangeChart is a panel with pie chart and btnPan,btnPan2,btnPan3 are the buttons. i just want to replace the exchangeChart panel witha grid or bar chart. How do i do it dynamically?

Screen shot is:

13 Oct 2009, 6:58 AM
you can use the card layout.

ruchika
14 Oct 2009, 3:44 AM
i tried card layout but on load itself the panel is not populating. The whole code is inside onready function. please suggest.


var firstPanel = new Ext.Panel({
title: 'Group By: ',
border:true,
renderTo: 'chartGrid',
width: 500,
height:250,
layout:'card',
activeItem:0,
items: [
{
id:'item1',
layout:'table',
layoutConfig: { columns:2 },
items: [btnPan,btnPan2]
},
{
id:'item2',
layout:'table',
layoutConfig: { columns:2 },
items: [btnPanGrid1,grid,btnPanGrid2]
}]
});

14 Oct 2009, 4:12 AM
you need to *remove* what is inside the container then add the new child (and call container.doLayout)

ruchika
14 Oct 2009, 4:29 AM
Sorry i didnt get, can you send a code snippet for the same.