Hi, I'm a newbie using extjs 2.0 and fusion charts 3.0
I'm trying to implement multiple charts in multiple tabs, with drop down menus which change the url of data stream to change the chart. I'm using the ux.fusion extension, i've tried posting in their forums but no luck.
I basically want to update the chart in the currently active tab. I've tried
var p = Ext.getCmp('tabs');
p.activeTab.getUpdater().refresh();
p.activeTab.body.getUpdater().refresh();
but no joy - can someone please help or show me an alternative way of doing this even without the ux.fusion extension
code below is abridged
Ext.onReady(function(){
var company_datastore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/loadgriddata?format=ext_json',//&comp_parent=' + comp_parent +'&period=' + period,
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'test_results',
id: 'id',
totalProperty: 'results'
}, [{
name: 'id',
mapping: 'id'
}, {
name: 'company_name',
mapping: 'company_name'
}, {
name: 'color',
mapping: 'color'
}, {
name: 'comp_failures',
mapping: 'comp_failures'
}, {
name: 'test_failures',
mapping: 'test_failures'
}, {
name: 'wear_failures',
mapping: 'wear_failures'
}, {
name: 'seal_failures',
mapping: 'seal_failures'
}]),
// turn on remote sorting
//remoteSort: true,
sortInfo: {
field: 'id',
direction: "ASC"
}
});
var company_column_model = new Ext.grid.ColumnModel([{
id: 'id',
header: "#",
width: 20,
dataindex: 'id',
width: 25,
hidden: false
}, {
header: 'Company Name',
dataIndex: 'company_name',
width: 150
}, {
}, {
header: 'Comp',
dataIndex: 'comp_failures',
width: 100
}, {
header: 'test',
dataIndex: 'test_failures',
width: 100
}, {
header: 'Wear',
dataIndex: 'wear_failures',
width: 100
}, {
header: 'Seal',
dataIndex: 'Seal_failures',
width: 100
}]);
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init();
var ds = company_datastore;
var cm = company_column_model;
cm.defaultSortable = true;
var grid = new Ext.grid.GridPanel({
ds: ds,
cm: cm,
//autoSizeColumns: true,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
//renderTo: 'north',
title: 'Company Results',
id: 'gridpanel',
width: 1000,
height: 250,
collapsible: true,
stripeRows: true,
viewConfig: {
forceFit: true
},
//height: 210,
//split: true,
region: 'north',
// inline toolbars
tbar: [{
text: 'Period',
menu: [{
text: '1',
checked: false,
group: 'period',
handler: function(){
period = 1;
reloaddata();
}
}, {
text: '2',
checked: false,
group: 'period',
handler: function(){
period = 2;
reloaddata();
}
}, {
text: '3',
checked: false,
group: 'period',
handler: function(){
period = 3;
reloaddata();
}
}, {
text: '4',
checked: false,
group: 'period',
handler: function(){
period = 4;
reloaddata();
}
}] // menu
}], //text
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: ds,
displayInfo: true,
displayMsg: 'Record {0} - {1} of {2}',
emptyMsg: "No records found"
}),
plugins: [new Ext.ux.grid.Search({
position: 'top'
})]
});
function handleHeaderClick(aThis, aIndex, aObj){
console.log("handling header click");
//stateMgr.set("UserTableSortCol", aIndex);
}
function reloaddata(){
ds.load({
params: {
start: 0,
limit: 5,
compparent: compparent,
period: period,
}
});
}
fpanel = new Ext.ux.FusionPanel({
//title : 'Graphic Details',
//collapsible : true,
//renderTo : 'foo',
//floating:false,
id: 'chartpd1',
fusionCfg: {
id: 'chart1' //,listeners: { //apply standard listeners each time the Chart is refreshed
// mousemove:function(){console.log(['mousemove',arguments])}
// }
,
params: {
flashVars: {
debugMode: 1,
lang: 'EN'
}
}
},
//autoScroll : true,
//id : 'chartpanel',
chartURL: '/FusionCharts/MSColumn3DLineDY.swf',
dataURL: '/overviewdata?format=xml&company=' + company + '&period=' + period, //let the chartObj load it
autoLoad: '/overviewdata?format=xml&company=' + company + '&period=' + period, //let Ext autoLoad do the same.
//width : 500,
//height : 200,
region: 'center',
listeners: {
show: function(p){
if (p.floating)
p.setPosition(p.x || 10, p.y || 10);
},
chartload: function(p, obj){
console.log('chart ' + obj.id + ' loaded.')
},
chartrender: function(p, obj){
console.log('chart ' + obj.id + ' rendered.')
}
},
tools: [{
id: 'gear',
handler: function(e, t, p){
p.refreshMedia();
},
qtip: {
text: 'Refresh the Chart'
}
}, {
id: 'print',
handler: function(e, t, p){
p.print();
},
qtip: {
text: 'Print the Chart'
}
}]
});
comppanel = new Ext.ux.FusionPanel({
//title : 'Graphic Details',
//collapsible : true,
//renderTo : 'foo',
//floating:false,
fusionCfg: {
id: 'chart2' //,listeners: { //apply standard listeners each time the Chart is refreshed
// mousemove:function(){console.log(['mousemove',arguments])}
// }
,
params: {
flashVars: {
debugMode: 1,
lang: 'EN'
}
}
},
chartURL: '/FusionCharts/Column3D.swf',
dataURL: '/loadcompdata?format=xml&company=' + company + '&period=' + period, //let the chartObj load it
autoLoad: '/loadcompdata?format=xml&company=' + company + '&period=' + period, //let Ext autoLoad do the same.
region: 'center',
listeners: {
show: function(p){
if (p.floating)
p.setPosition(p.x || 10, p.y || 10);
},
chartload: function(p, obj){
console.log('chart ' + obj.id + ' loaded.')
},
chartrender: function(p, obj){
console.log('chart ' + obj.id + ' rendered.')
}
},
tools: [{
id: 'gear',
handler: function(e, t, p){
p.refreshMedia();
},
qtip: {
text: 'Refresh the Chart'
}
}, {
id: 'print',
handler: function(e, t, p){
p.print();
},
qtip: {
text: 'Print the Chart'
}
}]
});
/**
* getTimeForURL method returns the current time
* in a URL friendly format, so that it can be appended to
* dataURL for effective non-caching.
*/
function getTimeForURL(){
var dt = new Date();
var strOutput = "";
strOutput = dt.getHours() + "_" + dt.getMinutes() + "_" + dt.getSeconds() + "_" + dt.getMilliseconds();
return strOutput;
}
var chartpanel = fpanel;
var tabs = new Ext.TabPanel({
activeTab: 0,
region: 'center',
id: 'tabs',
border: false,
items: [{
title: 'Maint Records',
layout: 'border',
id: 'risk1',
border: false,
items: [
chartpanel],
}, {
title: 'Comp',
layout: 'border',
id: 'comp',
border: false,
items: [comppanel]
}
});
var backtestPanel = new Ext.Panel({
layout: 'border',
renderTo: 'foo',
id: 'backtestpanel',
height: 500,
width: 1000,
items: [grid, tabs,
]
});
grid.on("rowdblclick", function(grid, row, e){
grid.suspendEvents();
window.location.href = '/test_results/' + grid.getStore().getAt(row).data.id;
});
ds.load({
params: {
start: 0,
limit: 5,
comp_parent: comp_parent,
period: period,
}
});
});
<% end %>
<%= flash[:notice] %>
<% javascript_tag do -%>
setTimeout(function() { new Effect.Fade("flash-message",{}); }, 2000);<% end -%>
