qvrb Report post Posted December 24, 2008 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 -%> Share this post Link to post Share on other sites
FusionCharts Support Report post Posted December 7, 2010 Hi, FusionCharts can be implemented in EXtJS tabs. Please take a look at: http://www.fusioncharts.com/code/JavaScript/Basics/Tabs/tab.html Share this post Link to post Share on other sites
