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

in extjs form adding , editing data want add field not send kind of data, display user when chooses id combobox.

now works fine, it's i'm playing code, , want learn new stuff.

i'm getting data table has material primary key , description of 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 new item table , choose combobox

{                   xtype: 'combobox',                 fieldlabel: 'material sku',                 name: 'mate_fk',                 store: this.brand,                 querymode : 'local',                 displayfield: 'material',                 valuefield: 'material'              }, 

i want have field underneath show description of material, when click save not send data. 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 example have 3 items

material description 1 it's nice 2 it's beautiful 3 it's ugly

so when chose 1 show: 1 it's nice

i tryed code above kinda failed. have put field of description make work

one way accomplish add listener combo change event. , modify displayfield below when event fires.

something similar (#combodescrfld displayfield in 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 fiddle demonstrating working code.

and full source below:

ext.application({     name : 'fiddle',      launch : function() {         ext.create('ext.form.panel',{             width:400,             height:400,             renderto:ext.getbody(),             title:'example combo 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'             }]         });     } });