1. #1
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213
    Vote Rating
    0
    poojagarg89 is on a distinguished road

      0  

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

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    871
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213
    Vote Rating
    0
    poojagarg89 is on a distinguished road

      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

Thread Participants: 1