PDA

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



JM786
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:
'account_code','account_name','account_address'
'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: [
'account_code','account_name','account_address'
]
});

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

alert(this.value);

//alert(data_vendor[0].get('account_name');

//alert(data_vendor.getCount());
//var settingsForm = Ext.getCmp('settingsForm');
var settingForm = document.getElementById('txtareafield');
settingsForm.loadRecord(data_vendor.getAt(0));
}
}
/*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?

Thanks,
JM

droessner
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) {
Ext.getCmp('txtareafield').setValue(records[0].get('account_address'));
}

JM786
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.

JM786
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.

Thanks.