EXTJS Pass data to another JS store - extjs

Question

I am new to EXTJS. I am developing application using EXTJS 4.2. I have grid that shows list of Unix server details. I have 2 JS one is serverdetails.js that shows all the servers in the grid and another one is pie.js that shows pie chart. My requirement is when I select server from the grid that is in ServerDetails.js and click on button it goes to dao layer to get server details, Now this server details I have to passed on to Pie chart Js Ext.data.Store object. How do I pass these server details to Pie chart JS?
Below is my code.
On the grid I have dashboard button that shows the pie chart for selected row in the grid. below is the code for that.
showDashBoard : function(button) {
var grid = Ext.ComponentQuery.query('serverdetailslist')[0];
var sm = grid.getSelectionModel();
var rs = sm.getSelection();
if (!rs.length) {
Ext.Msg.alert('Info', 'No Server Details Selected');
return;
}else{
dashBoardServerDetail = rs[0].getData();
var url = '/TechnologyTrackPortal/dashboard/loadDashBoard.action';
Ext.Ajax.request({
url : url,
method : 'POST',
jsonData: dashBoardServerDetail,
success: function(response){
var iResult = response.responseText;
Ext.create('resources.script.Pie');
}
});
}
}
response.responseText give me data in jason format. Now how do I pass this jason dat to pie.js file. Below is my pie.js file
Ext.onReady(function () {
Ext.define('DashBoardModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'title', type: 'string'},
{name: 'size', type: 'string'}
]
});
var store = Ext.create('Ext.data.Store', {
storeId : 'DashBoardStoreId',
model : 'DashBoardModel',
fields : ['title', 'size'],
autoLoad: false,
autoSync: true
});
var chart = Ext.create('Ext.chart.Chart', {
alias : 'widget.dashBoardPieChart',
title : 'Technology Portal',
store : store,
theme: 'Base:gradients',
legend: {
position: 'bottom'
},
series: [
{
type: 'pie',
angleField: 'size',
showInLegend: true,
label: {
field: 'title',
display: 'outside',
font: '12px Arial',
calloutLine: true
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'title',
display: 'rotate',
contrast: true,
font: '18px Arial'
},
tips: {
trackMouse: true,
width: 120,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('title') + ': ' + storeItem.get('size') + '%');
}
}
}
]
});
var panel1= Ext.create('widget.panel', {
// extend : 'widget.panel',
width: 800,
height: 600,
title: 'Server',
alias : 'widget.dashBoardForm',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}],
items: chart
});
I hope I am clear with my points.
Thanks
Sach

Answer 1

You need to see this as one app, one memoryspace, that the code is separated in two .js files makes not much difference, they both have to be loaded in your main html, asp, php or whatever. In that memoryspace you can reference each others variables and objects if they were declared before. The easiest way to accomplish what you ask is to have one store and use that for both views. So load the data in the store in your ServerDetails.js and have the chart use this same store.
I have some ExtJs apps that do that but they are for version 3.3.1 and not at my disposal for the moment. Hope this helps.