View Full Version : How to get specific field of JsonStore after combobox selected

21 Aug 2012, 11:20 AM
Please allow me to explain.

I query a data from database and show it in combobox. After the combobox is selected, I need to update a textarea with a string from the other field of the stored data.

The Ext.data.JsonStore has 3 fields: ['account_code','account_name','account_address'].
The Ext.form.field.ComboBox valueField:'account_code', displayField:'account_name'.
The data that I need to insert into the textarea is the 'account_address'.

If the data:
'A1', 'Company A', 'Address A'
'A2', 'Company B', 'Address B'

So the textarea must be 'Address B' if I choose 'Comapny B' (with the value of 'A2') in the combobox.

Here is my code:

var data_vendor = new Ext.data.JsonStore({
totalProperty: 'total',
proxy: {
type: 'ajax',
url: '../data/vendor_po.php',
reader: {
type: 'json',
root: 'results',
idProperty: 'account_code'
autoLoad: true,
fields: [

var cb_vendor = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Vendor',
displayField: 'account_name',
valueField: 'account_code',
store: data_vendor,
queryMode: 'local',
typeAhead: true
//JM TEST 20.08.2012 BEGIN
select: {
fn: function(){
//Ext.getCmp('txtareafield').setValue('Test Value'):



//var settingsForm = Ext.getCmp('settingsForm');
var settingForm = document.getElementById('txtareafield');
/*select: function(combo, record, index) {
alert(combo.store.filter('account_code', combo.getValue());


//JM TEST 20.08.2012 END

I guess some of you might have understand what I'm trying to get here.

Can I possibly doing this by combobox listener and filtering the store array based on what is choosen in combobox?


21 Aug 2012, 12:40 PM
In your select listener you can just do record.get('account_address') which will return the value of the account_address field of the selected record. So something like:

select: function(combo, records) {

23 Aug 2012, 9:19 PM
Thanks droessner,

but I still can't get it to work, fyi, the txtareafield is xtype. does that matter?

here's part of the code:

var main_panel = Ext.create('Ext.panel.Panel', {
title: 'Table Layout',
width: 900,
height: 750,
border: false,
header: false,
items: [{
xtype: 'panel',
title: 'Purchase Order', width: 570, height: 250,
padding: '0 0 10 0',
bodyPadding: 10,
items: [
border: false,
items: cb_vendor
xtype : 'textareafield', height: 60,
fieldLabel : 'address',
name: 'txtaddress'

Also, I use chrome dev tool and there's the console error:
Uncaught TypeError: Cannot call method 'setValue' of undefined

Do I miss something here? Thnx.

23 Aug 2012, 9:26 PM
It's done!

the getCmp refer to 'id' on xtype, not name. I missed that. Now it works fine.