2 grids using 2 diff. RowExpanders but same servlet class to show data

[poojagarg89]

Here screens are according to the sequal clicks of functionality:

Screen1: here are two grid with RowExpanders but the DS is using same Servlet class to show the data in both the grids..................it is giving gap between lines like one grid shows one row so the corresponding row to that in other grid come blank.....!!!
screen1.jpg

Screen2: Here, when I click on one expander of one grid the data comes correctly and even the sub grid also shows perfectly
screen2.jpg

Screen3: But, issue comes when I click on the same row corresponding to Screen2 grid in other grid then this happens
screen3.jpg

my code for both the grids are here:

var profitlossaccount_ds=new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
          url:'ProfitLossAccountDetails',            // balsheet_assets servlet
          method:'POST'}),        
    reader: new Ext.data.XmlReader({
          record: 'placcount_info'
    },['expense_name','expense_amount','income_name','income_amount','total'])
});

function getMyprofitaccount(record,index){
groupName = record.get("income_name");
var frmDt = Ext.getCmp("profitlossaccount_datefrom").getValue();
        var toDt = Ext.getCmp("profitlossaccount_dateto").getValue();
    
        if(frmDt==null || frmDt==""){
                     frmDt=null;
                 }else{
                      frmDt= frmDt.dateFormat('d/m/Y');
                 }
        if(toDt==null || toDt==""){
                     toDt=null;
                 }else{
                      toDt= toDt.dateFormat('d/m/Y');
                 }  
row_tmp=true;
var  profitaccount_ledger_grid;
var connObj12 = new Ext.data.Connection({
            timeout : 100000000000000000000,
            url : 'LedgersFallingUnderAGroup',        // Ledger Servlet
            method : 'POST'
        });
profitaccount_ledger_ds = new Ext.data.Store({   
      proxy : new Ext.data.HttpProxy(connObj12),    
        reader: new Ext.data.XmlReader({
               record: 'items'
               },
                 ['ledger_name','csum','dsum','cre_total','deb_total']
                ), 
         timeout:10000000000000000000000
});
profitaccount_ledger_ds.load({params:{groupName:groupName,fromDate:frmDt,toDate:toDt}});
var profitaccount_ledger_colmod = new Ext.grid.ColumnModel([//profitaccount_expander,
     {id:'ledger1',align:'left',header: "<center>Particulars</center>",width:100, sortable: true, dataIndex:'ledger_name'},
     {id:'debit1',align:'right',header: "<center>Debit (Rs.)</center>",width:100, sortable: true, dataIndex:'dsum'},
     {id:'credit1',align:'right',header: "<center>Credit (Rs.)</center>",width:100, sortable: true, dataIndex:'csum'}
]);
var profitaccount_ledger_sm = new Ext.grid.CheckboxSelectionModel();
profitaccount_ledger_grid = new Ext.grid.GridPanel({
    region:"center",
    id : 'profitaccount_ledger_grid',
    height:90,
    layout : 'fit',
    columnLines: true,
    store : profitaccount_ledger_ds,
    //sm: profitaccount_ledger_sm,
    cm : profitaccount_ledger_colmod,
    //loadMask : true,
    viewConfig : {
        forceFit : true
    },
    autoScroll : true,
    //plugins:[profitaccount_ledger_expander],
    collapsible: false, 
    animCollapse: false,
    stripeRows:true,
    iconCls:'icon-grid'
});    
                
                            
profitaccount_ledger_grid.render(Ext.get('remData'+record.id));
    profitaccount_ledger_grid.getEl().swallowEvent([ 'mouseover', 'mousedown', 'click', 'dblclick' ]); 
};    


var profitaccount_expander=new Ext.grid.RowExpander({
   remoteDataMethod : getMyprofitaccount
});

var profit_account_grid = new Ext.grid.GridPanel({
        id: 'profit_account_grid',
        region:'center',
        store:profitlossaccount_ds ,
        loadMask: true,
        title: "Income",
        height: 408,
        layout:'fit',
        columnLines: true,
        autoScroll: true,
        plugins:[profitaccount_expander],
        colModel: new Ext.grid.ColumnModel({
            
        columns: [profitaccount_expander,
            {id: 'description1' , header: "<center>Description</center>",width:200, dataIndex: 'income_name',sortable:false},
            {id: 'amount1' , header: "<center>Amount (Rs.)</center>",width:80, align:"right", dataIndex: 'income_amount',sortable:false}]
    }),
    viewConfig: {
        forceFit: true
    },
    animCollapse: false,
    stripeRows:true,
    autoScroll:true,
    bbar: new Ext.Toolbar({
        items: [
            "<b>Total</b>"
            ," ","->"," ",{
            xtype: "textfield",
            id: "profitaccount_tot",
            cls: 'align-text-right',
            name:"profitaccount_tot"
        }," ","-"," "]
    })
});

function getMylossaccount(record,index){
groupName = record.get("expense_name");
var frmDt = Ext.getCmp("profitlossaccount_datefrom").getValue();
        var toDt = Ext.getCmp("profitlossaccount_dateto").getValue();
    
        if(frmDt==null || frmDt==""){
                     frmDt=null;
                 }else{
                      frmDt= frmDt.dateFormat('d/m/Y');
                 }
        if(toDt==null || toDt==""){
                     toDt=null;
                 }else{
                      toDt= toDt.dateFormat('d/m/Y');
                 }  
row_tmp=true;
var  lossaccount_ledger_grid;
var connObj12 = new Ext.data.Connection({
            timeout : 100000000000000000000,
            url : 'LedgersFallingUnderAGroup',        // Ledger Servlet
            method : 'POST'
        });
lossaccount_ledger_ds = new Ext.data.Store({   
      proxy : new Ext.data.HttpProxy(connObj12),    
    reader: new Ext.data.XmlReader({
               record: 'items'
               },
                 ['ledger_name','dsum','csum','cre_total','deb_total']
                ), 
         timeout:10000000000000000000000
});
lossaccount_ledger_ds.load({params:{groupName:groupName,fromDate:frmDt,toDate:toDt}});
var lossaccount_ledger_colmod = new Ext.grid.ColumnModel([
     {id:'ledger1',align:'left',header: "<center>Particulars</center>",width:100, sortable: true, dataIndex:'ledger_name'},
     {id:'debit1',align:'right',header: "<center>Debit (Rs.)</center>",width:100, sortable: true, dataIndex:'dsum'},
     {id:'credit1',align:'right',header: "<center>Credit (Rs.)</center>",width:100, sortable: true, dataIndex:'csum'}
]);
var lossaccount_ledger_sm = new Ext.grid.CheckboxSelectionModel();
lossaccount_ledger_grid = new Ext.grid.GridPanel({
    region:"center",
    id : 'lossaccount_ledger_grid',
    height:90,
    layout : 'fit',
    columnLines: true,
    store : lossaccount_ledger_ds,
    //sm: lossaccount_ledger_sm,
    cm : lossaccount_ledger_colmod,
    //loadMask : true,
    viewConfig : {
        forceFit : true
    },
    autoScroll : true,
    //plugins:[lossaccount_ledger_expander],
    collapsible: false, 
    animCollapse: false,
    stripeRows:true,
    iconCls:'icon-grid'
});


lossaccount_ledger_grid.render(Ext.get('remData'+record.id));
    lossaccount_ledger_grid.getEl().swallowEvent([ 'mouseover', 'mousedown', 'click', 'dblclick' ]); 
};    



var lossaccount_expander=new Ext.grid.RowExpander({
   remoteDataMethod : getMylossaccount
});
var lossaccount_sm = new Ext.grid.CheckboxSelectionModel();
    var loss_account_grid = new Ext.grid.GridPanel({
        id: 'loss_account_grid',
        region:'center',
        store:profitlossaccount_ds ,
        loadMask: true,
        title: "Expenses",
        //anchor:'1',
        height: 408,
        plugins:[lossaccount_expander],
        layout:'fit',
        columnLines: true,
        autoScroll: true,
        colModel: new Ext.grid.ColumnModel({
            
        columns: [lossaccount_expander,
            {id: 'description1' , header: "<center>Description</center>",width:200, dataIndex: 'expense_name',sortable:false},
            {id: 'amount1' , header: "<center>Amount (Rs.)</center>",width:80,align:"right",  dataIndex: 'expense_amount',sortable:false}]
    }),
    viewConfig: {
        forceFit: true
    },
    animCollapse: false,
    stripeRows:true,
    autoScroll:true,
    bbar: new Ext.Toolbar({
        items: [
            "<b>Total</b>",
            " ","->"," ",{
            xtype: "textfield",
            id: "lossaccount_tot",
            cls: 'align-text-right',
            name:"lossaccount_tot"
        }," "]
    })
});

Can anyone help me for this What I should do to resolve this ?


Thanks & Regards,
Pooja

[mitchellsimoens]

Your code isn't very legible... so the issue is the sub grid gets added twice when you expand the first grid?

[poojagarg89]

Hi Mitchell,
I got the solution... Actually I was using one servlet for both the grids so it was giving a blank space for a corresponding row which was not having data for other grid.
So, I splitted the DataStore into two dummy DataStores and displaying those two DS data differently in those two grids so now the Id's r not matching and it is not giving prob of replicating sub-grids

Thanks n Regards,
Pooja