How do I show a value from model association in an ExtJS grid? -

How do I show a value from model association in an ExtJS grid? -

i trying draw grid each line stock's performance single day. in info structures, have date, stock, , stock price resource. store attached grid stock price store.

so, best of understanding, biggest problem when grid cell renderers, need have value, or need have blocking function get value.

when utilize getstore() magic function, i'm told record doesn't know (undefined method). i'm assuming it's 'cause record doesn't have same functionality standalone model.

i see few ways out of this:

customise grid and/or store when load happens, related rows loaded @ same time. create callback in renderer, , alter cell value afterwards, i'm ot sure how this. don't want alter cell value (stockid), visible output (symbol). change api match view.

summing these up: #1 seems lot of work seemingly simple outcome. maintain trying utilize associations, i'm finding they're not useful aside little things here , there, , not lots of data. #2 don't quite know begin @ moment; , #3 seems massive overkill, , ruin server side mean few more joins, , more complexity when saving records well.

so, 2 part question:

does know how load value associated model in grid? if not, pique curiosity, sort of things associations used in case there's lots of info deal on screen? lot's of info seems reason utilize ext vs jqueryui or other ui framework, i'm wondering associations for.

model - stock price

class="lang-js prettyprint-override">ext.define('myapp.model.stockprice', { extend : 'ext.data.model', idproperty : 'stockpriceid', fields : [ { name : 'stockid', type : 'int' }, { name : 'open', type : 'float' }, { name : 'close', type : 'float' }, { name : 'dateid', type : 'date' }], proxy : { type : 'rest', url : '/api/stock.price' }, reader : { type : 'json' }, associations : [ { type : 'hasone', model : 'myapp.model.date', primarykey : 'dateid', foreignkey: 'dateid' },{ type : 'hasone', model : 'myapp.model.stock', primarykey : 'stockid', foreignkey : 'stockid' } ] });

model - stock

class="lang-js prettyprint-override">ext.define('myapp.model.stock', { extend : 'ext.data.model', idproperty : 'stockid', fields : [ { name : 'stockid', type : 'int' }, { name : 'symbol', type : 'string' } ], proxy : { type : 'rest', url : '/api/stock' }, reader : { type : 'json' }, associations : [ { type : 'hasmany', model : 'myapp.model.stockpick', primarykey : 'stockid', foreignkey : 'stockid' }] });

model - date

class="lang-js prettyprint-override">ext.define('myapp.model.date', { extend : 'ext.data.model', fields : [ 'dateid', 'date' ] });

store - stock price

class="lang-js prettyprint-override">ext.define('myapp.store.stockprice', { extend : 'ext.data.store', model : 'myapp.model.stockprice', remotesort : true, remotefilter : true, pagesize : 5, autoload : true });

view - stock price

class="lang-js prettyprint-override">ext.define('myapp.panel.stockdata', { extend : 'ext.grid.panel', store : 'myapp.store.stockprice', columns : [ { text : 'symbol', flex : 1, sortable : false, hideable : false, dataindex : 'stockid', renderer : function(stockid, metadata, stockpricerecord) { // goes in here? problem point myapp.model.stock.load(stockid, function() { // ... callback }); // or homecoming stockpricerecord.getstock().get('symbol'); } }, { text : 'open', flex : 1, dataindex : 'open', renderer : 'usmoney' }, { text : 'close', flex : 1, dataindex : 'close', renderer : 'usmoney' }, { text : 'volume', flex : 1, dataindex : 'volume' }] });

your real alternative display info associated model in grid utilize custom renderer function on column. not alter values; render desired output cell.

now, implementing renderer function: start removing proxies models , instead create stores each model , allow stores manage proxies -- then, attach store stock listener on store stockprice hear datachanged event. when info of stockprice store changes, should grab every unique referenced stock id , tell stock store request payload of stocks ids.

that may mean altering api little bit back upwards sql in(...) behind scenes, leaving joins client side set less stress on server side.

in short, need utilize little bit of 3 ideas came in order best accomplish goal.

extjs model associations grid-layout