Results 1 to 3 of 3

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

  1. #1
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213
    Vote Rating
    2
      0  

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

    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:

    Code:
    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

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Your code isn't very legible... so the issue is the sub grid gets added twice when you expand the first grid?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213
    Vote Rating
    2
      0  

    Default

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •