1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    4
    Vote Rating
    0
    Karthi127 is on a distinguished road

      0  

    Default Unanswered: Working with Multiple Combo Box in Grid cell editing.

    Unanswered: Working with Multiple Combo Box in Grid cell editing.


    Hi,

    I have grid which having two combo boxes for each row. when i add first row, i need to select account type from one combo box, then, account numbers should be populate for auto complete on second combo box. When i add multiple rows, for example, after adding 3 rows in grid, if i again edit the first row to change the account number alone, it is still referring 3rd row (recent row) first combo box to get account type instead of getting account type from 1st row combo box. Below is the code that i am using, please help how to solve this issue.

    Code:
     Ext.require([
                    'Ext.data.*',
                    'Ext.grid.*',
                    'Ext.toolbar.Paging',                
                    'Ext.Util.*',
                    'Ext.picker.*',
                    'Ext.window.*',
                    'Ext.tip.*',
                    'Ext.form.*',
                    'Ext.EventObject',
                    'Ext.data.StoreManager',
                    'Ext.util.DelayedTask',
                    'Ext.view.BoundList',
                    'Ext.view.BoundListKeyNav'
                ]);
    
    
        
                Ext.onReady(pageInitialize);
                
                function pageInitialize(){
                    
                    
                    Ext.define('HedgeModel',{
                        extend:'Ext.data.Model',
                        fields:[
                            {name:'accountsubtype',type:"string"},
                            {name:'accountNumber',type:"string"}
                        ]
                    });
                    
                    hedgeStore=Ext.create('Ext.data.Store',{
                        model:'HedgeModel',
                        storeId:'HedgeStore'
                    });
                    
                    var comboStore=Ext.create('Ext.data.Store',{
                        fields:[{name:'accSubType'}],
                        data:[
                            {'accSubType':'Assets-Cash'},
                            {'accSubType':'Assets-Investment in LTD - Bonds'},
                            {'accSubType':'Assets-Investment in equity'},
                            {'accSubType':'Assets-Investment in Other Derivative Instrument'},
                            {'accSubType':'Assets-Interest Accured'},
                            {'accSubType':'Assets-swap receivables'},
                            {'accSubType':'Liabilities-Bonds Payables'},
                            {'accSubType':'Liabilities-Premium On Bonds Payable'},
                            {'accSubType':'Liabilities-Discount On Bonds Payable'},
                            {'accSubType':'Liabilities-swap contract - Derivative Instrument Payables'},
                            {'accSubType':'Liabilities-Interest Due'},
                            {'accSubType':'Income-Interest Revenue'},
                            {'accSubType':'Income-Operating Income'},
                            {'accSubType':'Income-Gain on Investment'},
                            {'accSubType':'Income-gain on swap'},
                            {'accSubType':'Income-un realised income'},
                            {'accSubType':'Income-effectiveness of instrument'},
                            {'accSubType':'Expenses-Interest Expense'},
                            {'accSubType':'Expenses-Operating Expense'},
                            {'accSubType':'Expenses-Loss on Investsment'},
                            {'accSubType':'Expenses-loss on swap'},
                            {'accSubType':'Expenses-unrealised loss'},
                            {'accSubType':'Expenses-ineffectiveness of instrument'},
                            {'accSubType':'Expenses-Amortization of basis adjustment'}
                        ]
                    });
                    
                    var editor={
                        xtype:'textfield',
                        allowBlank:false
                    };
                    
                    Ext.define('AccNumModel',{
                        extend:'Ext.data.Model',
                        fields:[
                            {name:'accNum'}
                        ]
                    });
                    
                    
                    var accComboStore=Ext.create('Ext.data.Store',{
                        fields:[{name:'accNum'}],
                        //model:'AccNumModel',
                        storeId:'accNumberStore',
                        proxy:{
                            type:'ajax',
                            reader:{
                                type:'xml',
                                root:'root',
                                record:'AccountNumber'
                            }
                        }
                        
                        /*data:[
                                    {'accSubType':'Assets-Cash'},
                                    {'accSubType':'Assets-Investment in LTD - Bonds'}
                            
                                ]*/
                    });
                    
                    
                    
                    
                    Ext.define('accTypeCombo',{
                        extend:'Ext.form.ComboBox',
                        alias:'widget.customCombo',
                        id:'accTypeCombo',
                        store:comboStore,
                        typeAhead:true,
                        editable:true,
                        triggerAction:'all',
                        emptyText:'Account Type',
                        queryMode:'local',
                        displayField:'accSubType',
                        listeners:{
                            scope:this,
                            'select':function(combo){
                                var accNumstore=Ext.data.StoreManager.lookup('accNumberStore');
                                var newUrl='../acct/getAccountNumbers.html?accountTypeString='+combo.getValue()+'&autoRefresh=true';
                                accNumstore.setProxy({
                                    type: 'ajax', 
                                    url: newUrl, 
                                    reader:{
                                        type:'xml',
                                        root:'root',
                                        record:'AccountNumber'
                                    }
                                });
                                
                                accNumstore.read();
                                
                            }                        
                        }
                        
                        
                    })
                    
                    
                    
                    
                    Ext.define('accNumberCombo',{
                        extend:'Ext.form.ComboBox',
                        alias:'widget.accNumCombo',
                        id:'accNumberCombo',
                        store:accComboStore,
                        queryModel:'local',
                        displayField:'accNum',
                        typeAhead:true,
                        editable:true,
                        hideTrigger:true,
                        triggerAction:'all',
                        emptyText:'Account Number',
                        listeners:{
                            scope:this,
                            'change':function(combo)//Adding this event to pull account numbers when user typing in combo box
                            {
                                if(combo.getValue().length>=1)
                                {
                                    var accTypeStr=Ext.getCmp('accTypeCombo').getValue();//Getting account type to make sure that theauto populated accounts are same type
                                    
                                    var accNumstore=Ext.data.StoreManager.lookup('accNumberStore');
                                    var newUrl='../acct/getAccountNumbers.html?accountTypeString='+accTypeStr+'&accountString='+combo.getValue()+'&autoRefresh=true';
                                    accNumstore.setProxy({
                                        type: 'ajax', 
                                        url: newUrl, 
                                        reader:{
                                            type:'xml',
                                            root:'root',
                                            record:'AccountNumber'
                                        }
                                    });
                                    accNumstore.read();
                                }
                            }
                        }
                        
                    })
                    
                    var cellEditing=Ext.create('Ext.grid.plugin.CellEditing',{
                        clicksToEdit:1
                    });
                    
                    
                    
                    var grid=Ext.create('Ext.grid.Panel',{
                        store:hedgeStore,
                        columns: [{
                                header:'Account Type',
                                dataIndex:'accountsubtype',
                                
                                width:500,
                                editor: {
                                    xtype:'customCombo'
                                }
                            },{
                                header:'Account Number',
                                dataIndex:'accountNumber',
                                width:450,
                                editor:{
                                    xtype:'accNumCombo'
                                }
                            },{
                                xtype:'actioncolumn',
                                width:50,
                                sortable:false,
                                items:[{
                                        icon:'../resources/images/delete.png',
                                        tooltip:'Delete Row',
                                        handler: function(grid,rowIndex,colIndex)
                                        {
                                            hedgeStore.removeAt(rowIndex);
                                            rowCount=rowCount-1;
                                        }
                                    }]
                            }],
                        selModel:{
                            selType:'cellmodel'
                        },
                        renderTo:'resultGrid',
                        width:1000,
                        height:300,
                        title:'Add Accounts To This Template',
                        frame:true,
                        tbar:[{
                                text:'Add Account',
                                handler: function(){
                               
                                    var r=Ext.create('HedgeModel',{
                                        accountsubtype:'',
                                        accountNumber:''
                                    });
                               
                                    hedgeStore.insert(rowCount,r);
                               
                                    cellEditing.startEditByPosition({row:rowCount,column:0});
                                    rowCount=rowCount+1;
                                }
                            }],
                        plugins:[cellEditing]
                    });
    Last edited by scottmartin; 22 Oct 2012 at 8:53 AM. Reason: Please format your code!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,010
    Answers
    668
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please have a look at beforequery event for your combo to filter data and also refer to queryMode: 'remote' to reload your data from table each time.

    Scott.

Thread Participants: 1