PDA

View Full Version : How to populate the value in the textfield based on combobox on select event.



GayetriMansingh
20 Nov 2013, 11:08 PM
I have a combobox. The value should be populated to the textfield on select event of combobox.
In the below code, I am selecting the account number. based on the selection the telephone number
( which belongs to the same account id) should be displayed to the textfield. follwoing is the code:

//Store forAccount
//=====================================================//
Ext.define('accountList', {
extend : 'Ext.data.Model',
fields : [ {
name : 'accountId',
type : 'int'
}, {
name : 'accountName',
type : 'string'
} ]
});


var storeAccount = Ext.create('Ext.data.Store', {
model : 'accountList',
proxy : {
type : 'ajax',
url : basePath +'salesOrder/AccountData.json',
reader : {
root : '',
type : 'json'
}
}
});


items : [ {
xtype : 'container',
flex : 1,
layout : 'anchor',
items : [ {
xtype : 'combobox',
fieldLabel : 'Company name',
vtype : 'alphanum',
emptyText : 'Type',
allowBlank : true,
maxLength : 50,
enforceMaxLength : 50,
typeAhead : true,
name : 'accountId',
store : storeAccount,
// forceSelection: false,
displayField : 'accountName',
valueField : 'accountId',
id: 'accountId',
anchor : '90%',
emptyText : '',
listeners: {
select: function(combo, record, index) {
Ext.getCmp('telephone').setValue(combo.getValue())
alert(combo.getValue());
},
change: function (combo, newValue, oldValue) {
Ext.getCmp('telephone').setValue(newValue)
}
}


},


{
xtype : 'textfield',
fieldLabel : 'Company main telephone number',
maxLength : 20,
enforceMaxLength : 20,
anchor : '90%',
regex : /^([+]?[0-9]{1,2}-[0-9]{3}-[0-9]{3}-[0-9]{4})$/,
emptyText : ' +1-234-543-4533',
allowBlank : true,
hideTrigger : true,
name : 'telephone',
valueField : 'telephone',
store : storeAccount,
id :'telephone'
},
any help will be highly appriciated

penot
21 Nov 2013, 12:34 AM
listeners: {
change: function (combo, newValue, oldValue) {
var value_index = storeAccount.find('accountId', newValue);
var record = storeAccount.getAt(value_index);


Ext.getCmp('telephone').setValue(record.get("accountName"));
}
}

GayetriMansingh
21 Nov 2013, 1:14 AM
Thanks a lot for your quick reply..it really worked :)