load grid on row click of another grid

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?

Just curious, but why are you using Ext.Ajax.request to get the data for the 2nd store? Why not just configure the 2nd store with an Ajax proxy and load its data when selecting the record in the first grid? — existdissolve
Have you tried creating model instances for each new record and then adding them to your store with insert method? — third_eye
@existdissolve : for every single click i am sending parameter to server side.according to that grid 2 is getting record. — user3099552
Yes I understand that. But why not just have your second store make that request? You can just as easily send a param in load() and let the store automatically deal with the response. You're basically reinventing the wheel with your approach. — existdissolve

code4jhon code4jhon · Accepted Answer · 2013-12-26T21:17:42

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');

}

});

load grid on row click of another grid

1 Answers