Toggle panel content

[interose]

Hi,

I'm looking for a basic approach to display a set of data either as grid or as chart. It's up to the user which presentation he prefers.

I have a tab panel which has three static tabs. Each tab displays a grid. So far this was no problem at all. Now I want to display a chart instead of the grid. It's also no problem to create an additional tab with a chart which is linked to a store. But I want to toggle between chart and grid at runtime via a button.

So my question is if it is possible to toggle the presentation (grid vs. chart) within a tab panel?

I've searched around and found a former plugin RemoteComponent which makes it possible to load a component via Ajax. So then it would be possible to load the tab content via ajax and change the tab content. E.g. by clicking a toolbar button. But unfortunately this plugin is only for extjs 3.x and 2.x.

According to this thread (http://www.sencha.com/forum/showthread.php?22684-quot-Autoload-quot-for-the-Items-of-a-FormPanel/page3) using the option script: true with autoloading is not a good option. As mentioned, a better way is to write his own renderer which then executes the ext javascript.

So maybe someone has faced a similar problem. Thanks in advance - Marcus.

[scottmartin]

Have you considering having both the grid and the chart created in separate panels in the tab and hide the panel you do not want displayed?

Regards,
Scott.

[interose]

Hi Scott,
in fact this was my first approach but I was unsure about the performance and I also read that nesting of too much panels isn't a smart way.

Anyway I created a simple example and it works well for me.



var redirectsModel = Ext.define('redirectView', {
extend: 'Ext.data.Model',
fields: [
{name: 'product', type: 'string'},
{name: 'sum', type: 'int'}
]
});


var redirectsStore = Ext.create('Ext.data.Store', {
autoLoad: true,
model: redirectsModel,
remoteSort: false,
data : [{
"sum":"55100",
"campaign":"Campaign A"
},{
"sum":"55100",
"campaign":"Campaign B"
},{
"sum":"55100",
"campaign":"Campaign C"
},{
"sum":"34000",
"campaign":"Campaign D"
}]
});


var myGrid = Ext.create('Ext.grid.Panel', {
store: redirectsStore,
border: 0,
columns: [
{header: 'Campaign',dataIndex: 'campaign', sortable: false,hideable: false},
{header: 'Redirects', dataIndex: 'sum', sortable: false,hideable: false}
],
forceFit: true,
flex: 1
});


var myChart = Ext.create('Ext.chart.Chart', {
store: redirectsStore,
flex: 1,
series: [{
type: 'pie',
field: 'sum'
}]
});


var myPanel = Ext.create('Ext.panel.Panel', {
title: 'Redirects',
layout: 'fit',
border: 0,
items: [myGrid, myChart]
});

Ext.onReady(function(){

myGrid.setVisible(false);

Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'tabpanel',
margin: '20',
items: [myPanel],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'button',
text: 'Toggle Chart',
handler: function() {
if(myGrid.isVisible())
{
myGrid.setVisible(false);
myChart.setVisible(true);
}
else
{
myChart.setVisible(false);
myGrid.setVisible(true);
}
}
}]
}]
}]
});
});



I have to test the performance on my application. In summary there are up to 12 Grids (4 categories consisting of 3 grids each).

One thing seems weired to me. If I add the chart directly to the tabpanel I don't have to set a width or a height. If I add the chart to a panel and add the panel to the tabpanel I have to set a width and a height.

Regards
Marcus