PDA

View Full Version : The grid loads correctly the store but not the charts



sebastien
27 Apr 2009, 6:31 AM
Hi,

I am using with success the grid in extjs2.0. I works great in extjS 3.0 but I cannot populate the graph from the same Json store as the grid.

To make things more understandable, I have copied :
the response from the server in a file : tabA_label.php (this is the store labels),
The data itself is put in a file named tabA_store.php (in JSON format).

The text in tabA_label.php is :

{success:true,colonne:["Sites","2007"]}

The text in tabA_store.php is :

{success:true,rows:[{"id":0,"Sites":"site1","2007":"57.4"},{"id":1,"Sites":"site2","2007":"10.7"}]}


I have also trimmed to the maximum the code so that errors should appear obviously but it is not so obvious for me.

Do you have some clues ?

Thanks in advance.
Regards.
Sebastien;

PS the js (and html code):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test grid</title>

<link rel="stylesheet" type="text/css" href="../ext33/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ext33/resources/css/grid.css" />
<script type="text/javascript" src="../ext33/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext33/ext-all.js"></script>
<script src="../ext33/build/locale/ext-lang-fr.js"></script>
<script>


Ext.onReady(function(){

var win_res;
var tab2=[];
// to get the legend and then triggger the store filling.
get_legend_label(tab2);


// to retrieve the column names and then to fill the store and trigger the grid and graph display
function get_legend_label(tab2)
{
function requestSuccessfull(response, options)
{
var obj = Ext.util.JSON.decode(response.responseText);
if(obj.success)
{
for (i=0; i<obj.colonne.length; i+=1)
{
tab2[i]=obj.colonne[i];
}

var colone =fill_colone(tab2);
var store =fill_store(tab2);
var res = get_grid_store1(store, colone,tab2);
}
else
{
Ext.MessageBox.alert('Error reading the message',obj.message);
};
};

function requestFailed(response, options)
{
Ext.MessageBox.alert("Error");

};
var url_reponse_legende="tabA_label.php"
var conn = new Ext.data.Connection();
conn.request
(
{
url: url_reponse_legende,
params: {
type_analyse: 'what ever',
value: 'not user'
},
success: requestSuccessfull,
failure: requestFailed
}
);
};

function change(val,store)
{
return '<span style="color:black;">' + val +'</span>';
};


function fill_colone(tab2)
{

var colone=[];
var nb_element_max_sans_reduc=90;

for (i = 0; i < tab2.length; i+=1)
{
colone[i]={header: tab2[i],sortable : true, enableColumnMove: false, width : 100 , renderer:change, dataIndex: tab2[i]};
};

return colone;
};

function fill_store(taby)
{
var url_data_store="tabA_store.php";
var store = new Ext.data.Store(
{
url : url_data_store,
reader: new Ext.data.JsonReader(
{
root:'rows',
id:'id'
},
taby
)
});
return store;
};

function get_grid_store1(store,colone,titre,tab2)
{

store.load();
var grid = new Ext.grid.GridPanel(
{

title : "the grid",
store: store,
columns : colone,
width:500,
height:300,
renderTo : 'grid_id',
});


store.load();
var graph = new Ext.Panel(
{
iconCls:'../images/chart.gif',
title :"the graph",
height:300,
width:500,
forceFit: true,
renderTo : 'graph_id',
items:
{
xtype:'linechart',
store: store,
url: '../ext33/resources/charts.swf',
xFields:'Sites',
yFields:'2007'
}
});
};
});

</script>
</head>
<body>
<body>
<div id="qtf-toolbar"></div>
<div id='popup_log_window'></div>
<div id='window_res'></div>
<div id='Reporting' style ='color:red;'></div>
<div id='grid_id'></div>
<div id='graph_id'></div>
</body>
</body>
</html>




The text in tabA_label.php is :
{success:true,colonne:["Sites","2007"]}


The text in tabA_store is :
{success:true,rows:[{"id":0,"Sites":"site1","2007":"57.4"},{"id":1,"Sites":"site2","2007":"10.7"}]}

jay@moduscreate.com
27 Apr 2009, 6:32 AM
How about using the code tag? or extpaste.com?