PDA

View Full Version : Working with Multiple Combo Box in Grid cell editing.



Karthi127
22 Oct 2012, 6:04 AM
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.



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]
});

scottmartin
22 Oct 2012, 8:59 AM
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.