PDA

View Full Version : Handle Click Event on Line Chart ?



ektanit
1 May 2009, 11:09 AM
I am trying to handle a click event on the line chart. The sequence of events should be
1. Display A line chart
2. Click on a point
3. grab the related parameterts
4. Pass these parameters to the server and display the grid with the detailed information.

My problem is in Step 4. My request is not sent to the server. Can someone tell me where I can be wrong.



new Ext.Button({
text: 'Display Chart',
renderTo: 'chartButton',
handler: function() {
LoadAndShowChart();
}

});

var chartstore = new Ext.data.JsonStore(
{
url: '/ext/testServlet',
root: 'chart.data',
baseParams: {'action': 'fetchChartData'},
fields: [
,{name: 'color', type: 'string'}
,{name: 'lots', type: 'int'}
,{name: 'alias', type: 'string'}
]

});

var linecht = new Ext.Panel({
iconCls:'chart',
title: 'ExtJS.com',
frame:true,
width:600,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
store: chartstore,
xField: 'alias',
yField: 'lots',
listeners: {
itemclick: function(o){
var rec = chartstore.getAt(o.index);
refreshGrid(rec.get('alias'),
--------and other parameters here.
}
}
},
url:'../../resources/charts.swf'

});

var datastore = new Ext.data.JsonStore({
url: '/ext/testServlet',
root: 'flowers.data',
id: 'flowerId',
totalProperty: 'flowers.totalRows',
baseParams: {'action': 'listFlowers'},
fields: [
--- All the fields here
]
});
var grid = new Ext.grid.GridPanel( {
store: datastore
-- other grid configuration
})

function refreshGrid(-- all parameters are included here -- ){
// render the grid
grid.render(document.getElementById('tradeGrid'));
alert( ) ; -- this prints all the parameters
// configure callback
grid.getStore().on('load', loadSuccessful);
// load the store
alert("loading the store now "); -- This comes up
grid.getStore().load({params: {'fetchfromDb': fetchDb,
'alias':alias,
-- all other params here
start:0, limit:25
}});
-- The above load statement does not send a request- Where is the problem
-- as a result the grid is empty.
}