javascript - Displaying values in an ext grid where the values correspond to strings in another table/model -

i'm teaching myself extjs building simple 'scrum' development tracking application. i'm displaying "backlog" grid panel displays properties of card(user story).

card.js (card model)

ext.define('am.model.card', {     extend: 'ext.data.model',     fields: [                 'id',                 'name',                 'priority_id',                 ...             ] }); 

priority.js (priority model)

ext.define('am.model.priority', {     extend: 'ext.data.model',     fields: [                 'id',                 'name',                 'short_name'             ] }); 

so data card this:

backlogcards.json (data)

{     success: true,     backlogcards: [         {             id: 1,              name: 'ones',             priority_id: 2,             ...         },         {             id: 2,              name: 'twos',             priority_id: 3,             ...         }     ] } 

and priorities looks this:

priorities.json (data)

{     success: true,     priorities: [         {             id              : 1,              name            : "high",             short_name      : "h"         },         {             id              : 2,              name            : "medium",             short_name      : "m"         },             {             id              : 3,              name            : "low",             short_name      : "l"         }     ] } 

so ideally have grid panel display short_name corresponding priority_id. when item clicked on edited inline, combo box displayed shows name property. i'm half way there already.

backloglist.js (view)

ext.define('am.view.card.backloglist', {     extend: 'ext.grid.panel',     alias: 'widget.backlogcardlist',      title: 'backlog',     store: 'backlogcards',      seltype: 'cellmodel',     plugins: [         ext.create('ext.grid.plugin.cellediting', {             clickstoedit: 1         })     ],      columns: [         { header: 'id', dataindex: 'id' },         { header: 'name', dataindex: 'name', field: 'textfield' },         {             header: 'priority',             dataindex: 'priority_id',             width: 130,             field: {                 xtype: 'combobox',                 typeahead: true,                 store: 'priorities',                 displayfield: 'name',                 valuefield: 'id',                 listclass: 'x-combo-list-small'             }         }     ]  }); 

so know 'dataindex' property need modify in order change display, i'm not sure how tie 2 stores together.

as can see above, priority being displayed number instead of short_name.

is situation need use associations? (i know of them) sencha docs

thank you!

edit1: oh realize 'hard code' renderer property change, avoid , instead use values priorities store.

    renderer: function(value){         if (value==3)         {             return "l";         }         else if (value==2)         {             return "m";         }         else         {             return "h";         }     }, 

edit2 evan: priorities store

ext.define('am.store.priorities', {     extend: 'ext.data.store',     model: 'am.model.priority',     autoload: true,      proxy: {         type: 'ajax',         api: {             read: 'app/data/priorities.json',             update: 'app/data/updateusers.json'         },         reader: {             type: 'json',             root: 'priorities',             successproperty: 'success'         }     } }); 

the store.each refers store, right? if so, how perform each operation on it?

i tried changing declaration line to:

var test = ext.define('am.store.priorities', { 

and tried changing code test.each unsuccessful.

thanks again!

you need use renderer, there's nothing stopping looping on values in priorities store , checking, like:

renderer: function(value) {     var display = '';     store.each(function(rec){         if (rec.get('id') === value) {             display = rec.get('name');             return false;         }     });     return display; }