PDA

View Full Version : 2 grids using 2 diff. RowExpanders but same servlet class to show data



poojagarg89
30 Sep 2012, 10:59 PM
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.....!!!
39050

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

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

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
15 Oct 2012, 8:46 AM
Your code isn't very legible... so the issue is the sub grid gets added twice when you expand the first grid?

poojagarg89
15 Oct 2012, 8:51 AM
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
:)