load grid on row click of another grid - json

Question

I am not able to load store of one grid(Grid 2) when I click one row of another grid(Grid 1). When I click on one row it sending http request to servlet of Grid2 and In response I am getting correct data. but I am not getting that response in Grid 2 store. actually I am trying to save that response in One array from that array I am creating store to 2nd grid. below is the listener part of 1st grid:
listeners: {
'select': function(grid,record, rowIndex,e) {
var selectedvalue = record.get('YCSET_ID');
//callAjaxToCheckSession(selectedvalue);
//alert(selectedvalue);
console.log('click'+selectedvalue);
changeConnection(selectedvalue,yieldstore,records)
//yieldstore is the store for second grid and records is an array
}
now function changeConnection:
function changeConnection(selected,yieldstore,records){
alert(selected);
Ext.Ajax.request({
url: 'YieldCurveServlet', //servlet of 2nd grid
method:'GET',
headers: {
'Content-Type': 'text/html'
},
params: {
YCSET_ID: selected
},
success: function(response, opts) {
var res = Ext.decode(response.responseText);
console.dir(res); //here I am getting correct response
if(res !== null && typeof (res) !== 'undefined'){
// loop through the data
Ext.each(res.data, function(obj){
//add the records to the array
records.push({
YCSET_ID: obj.YCSET_ID,
YCSET_TENOR: obj.YCSET_TENOR,
YCSET_TENOR_UNIT: obj.YCSET_TENOR_UNIT,
YCSET_BID_RATE: obj.YCSET_BID_RATE,
YCSET_ASK_RATE: obj.YCSET_ASK_RATE
})
});
//update the store with the data that we got
yieldstore.loadData(records);
}
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
}
and below is store definition for 2nd grid:
var records = [];
var yieldstore = Ext.create('Ext.data.Store', {
fields :['YCSET_ID',
'YCSET_TENOR','YCSET_TENOR_UNIT',{
name:'YCSET_BID_RATE',
mapping :'YCSET_BID_RATE',
type: 'double'
},{
name:'YCSET_ASK_RATE',
type: 'double'
}],
data: records
});
Where I am doing wrong?

Answer 1

Oops a lot of weird things going on on your ExtJs code.
1.- I recommend you to use a store binded to your grid. (see official doc)
2.- Bind a model to your store.
3.- Define (if it makes sense) your own class that extends store (EmployeesStore).
4.- In order to load information in you second grid do something like:
var storeOfSecondGrid = Ext.ComponentQuery.query('grid[itemId=mySecondGrid]')[0].getStore();//where itemId is part of your grid config
storeOfSecondGrid.load({
callback:function(){
console.log('after load');
}
});