Reload Chart

[alex weber]

Hello,

Im trying to make a chart + grid with a checkbox (on grid) to load the selected data into the chart.

The problem is that when I click the checkbox, I can reload the store but not the chart

papalocksmith.com (http://www.papalocksmith.com/)


This is my code.
Code:
//outside Ext
function actmiStore(g,id){
var op;
if(document.getElementById(id).checked){ op = 1; }else{ op = 0; }
Ext.StoreMgr.map['miStore'].load({ params:{ g: g, o: op }});
}

Ext.chart.Chart.CHART_URL = '/ext311/resources/charts.swf';

Ext.onReady(function(){

var ps = 1;
var ls = 1;

Ext.BLANK_IMAGE_URL = '/ext311/resources/images/default/s.gif';

Ext.QuickTips.init();
var miStore= new Ext.data.Store({
id:'miStore',
autoLoad: true,
proxy: new Ext.data.HttpProxy({ url: 'graficas.php?gr=miStore&ty=grupo',method: 'GET'}),
reader: new Ext.data.JsonReader({fields: [{name: 'val', mapping: 'val'},{name: 'nom', mapping: 'nom'}]})
});

var miStoreChart = new Ext.chart.PieChart({
id: 'miStoreChart',
store: miStoreDS,
dataField: 'val',
categoryField : 'nom',
extraStyle:{
legend:{
display: 'bottom',
padding: 5,
font:{
family: 'Tahoma',
size: 13
}
}
}
});

function actmiStore(val,p,r){
ps = ps+1;
if (val > 0) {
return '<input id="actmiStoreCheck'+(ps-1)+'" type="checkbox" checked="checked" onClick="actmiStore('+"'"+r.data['gru_id']+"','actmiStoreCheck"+(ps-1)+"')"+'"'+'>';
} else {
return '<input id="actmiStoreCheck'+(ps-1)+'" type="checkbox" onClick="actmiStore('+"'"+r.data['gru_id']+"','actmiStoreCheck"+(ps-1)+"')"+'"'+'>';
}
}

var miStoreColumnModel = new Ext.grid.ColumnModel({
defaults: {
sortable: true // columns are not sortable by default
},
columns: [
{ header: 'ID', dataIndex: 'gru_id' },
{ header: 'Nombre', dataIndex: 'gru_nombre' },
{ header: 'Graficar?', dataIndex: 'on_graph', renderer: actmiStore }
]
});

var miStoreDataDS = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({ url: 'graficas.php?ty=global',method: 'GET'}),
reader: new Ext.data.JsonReader({fields: [{name: 'gru_id', mapping: 'gru_id'},{name: 'gru_nombre', mapping: 'gru_nombre'},{name: 'on_graph', mapping: 'on_graph'}]})
});
miStoreDataDS.load();

// create the Grid
var miStoreGrid = new Ext.grid.GridPanel({
id: 'miStoreGrid',
viewConfig: { forceFit: true },
store: miStoreDataDS,
cm: miStoreColumnModel,
stripeRows: true,
autoHeight: true,
width: 600,
title: 'Mi STORE',
stateful: true,
loadMask: true,
stateId: 'miStoreGrid',
bbar: []
});

miStoreGrid.on('rowdblclick', function(grid){
var sel = miStoreGrid.getSelectionModel().getSelected();
var selIndex = miStoreDataDS.indexOf(sel);
var seldata = sel.data;
accWinx.show(); //a non important window
Ext.getCmp('accWin').body.update('<p><b>Datos:</b><br />Rut:'+seldata.gru_id+'-'+seldata.gru_nombre+'</p>');
});

var miStorePanel = new Ext.Panel({
items:[miStoreChart, miStoreGrid]
});
With this code I have no problems reloading the store (tested on F but my chart doesnt. I'm missing something else mb

Thanks!
Reply
Reply With Quote

[skirtle]

I tried your example. Whenever I clicked a checkbox it reloaded the store and the graph redrew accordingly. I'm obviously not using your PHP... are you sure that your server is returning the response you expect? If I've understood your code correctly it looks like your store requests are state changing, despite being GET requests. Each reload of the data also changes the server-side state of one of the records?

I'm using ExtJS 3.3.1.

Though I couldn't reproduce the problem with the graph redrawing there are several other things that caught my eye in your code that you may want to address:


Please use code tags when posting code on the forum.
You have 2 functions called actmiStore. This is really confusing and likely to cause errors.
var miStore is never used and miStoreDS is not declared. I assumed that miStore is meant to be miStoreDS.
You're explicitly creating a JsonReader on a store. Consider using a JsonStore instead.
You don't need to specify mapping properties for your JsonReader if they're the same as the name.
You may want to consider using Ext.Template or Ext.XTemplate for generating the checkbox HTML. It should make it much more readable.
Everywhere you're reading the value of the variable ps you're subtracting 1 from it. Why not just start it from 0 instead of 1 and get rid of all the minus ones?
var op = document.getElementById(id).checked ? 1 : 0; or var op = Number(document.getElementById(id).checked);


HTH.