ExtJS Form Displaying description when i chose a material from combobog - extjs

Question

In extJS Form for adding and editing data i want to add a field that will not send any kind of data, only display it to the user when he chooses an id from combobox.
Now everything works fine, it's just i'm playing with code, and want to learn new stuff.
I'm getting data from a table which has material as Primary key and description of that key.
this.brand = Ext.create('Ext.data.Store',
{
fields: ['material','description'],
autoLoad: true,
proxy:
{
type: 'ajax',
url: 'sku/load',
reader:
{
type: 'json',
root: 'data'
}
}
});
Now when i'm adding a new item to the table and choose from combobox
{
xtype: 'combobox',
fieldLabel: 'Material SKU',
name: 'mate_fk',
store: this.brand,
queryMode : 'local',
displayField: 'material',
valueField: 'material'
},
i want to have a field underneath it that will show the description of the material, but when i click save it will not send any data.
Something like this:
{
xtype: 'combobox',
fieldLabel: 'Material SKU',
name: 'mate_fk',
store: this.brand,
queryMode : 'local',
displayField: 'material',
valueField: 'material'
},
{
name: 'description',
fieldLabel: 'Material Description',
displayField: 'description',
}
for an example i have 3 items
Material Description
1 It's nice
2 It's beautiful
3 It's ugly
So when i chose 1 it will show:
1
It's nice
I tryed with the code above but it kinda failed. What do i have to put into field of description to make it work

Answer 1

One way to accomplish this would be to add a listener to the combo for the change event. And modify a displayfield below when that event fires.
Something similar to this (#comboDescrFld is the displayfield in this example):
listeners:{
change:function(me, newValue){
if(newValue){
var descr = me.getStore().findRecord('key', newValue).get('descr');
me.up('form').down('#comboDescrFld').setValue(descr);
}else{
me.up('form').down('#comboDescrFld').setValue('No Selection Made');
}
}
}
Here is a fiddle demonstrating the working code.
And the full source below:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel',{
width:400,
height:400,
renderTo:Ext.getBody(),
title:'Example Combo With Field Tied',
items:[{
xtype:'combo',
displayField:'key',
valueField:'key',
store:Ext.create('Ext.data.Store',{
fields:['key','descr'],
data:[{
'key':1,
'descr':'Hello World'
},{
'key':2,
'descr': 'Another Field'
},{
'key':3,
'descr':'Even More Stuff Here'
}]
}),
listeners:{
change:function(me, newValue){
if(newValue){
var descr = me.getStore().findRecord('key', newValue).get('descr');
console.log(descr);
me.up('form').down('#comboDescrFld').setValue(descr);
}else{
me.up('form').down('#comboDescrFld').setValue('No Selection Made');
}
}
}
},{
xtype:'displayfield',
value:'No Selection Made',
itemId:'comboDescrFld'
}]
});
}
});