View Full Version : I would like to reference from a grid with a store to another store

17 Apr 2014, 8:17 AM
So my problem is the next:

I have got two stores with this structure :
Transaction : date, userAccount, partnerAccount, amount, currency, comment
Account : number, currency, balance, name.

I need to show in a grid the Transaction's date, userAccount, partnerAccount and the amount. But there is the problem. I read the data's from common file with another root. I need to display the Account's name instead of userAccount which is only numbers split with - . I would like to do it in a coloumns renderer so could you help me with an example function () ? I have got 15 transactions and 2 account, and the Transaction's userAccount = Account's number so it could be connected in this way but i don't know how.

Gary Schlosberg
17 Apr 2014, 9:27 AM
Do you have control over the data? If it were me, I'd try to control everything at the server level so that the user is not affected by performance, etc.

17 Apr 2014, 9:30 AM
I am a beginner of Ext JS so what you tell me could be true but it is a demoproject for me from a company and the requirements is to do the whole project on client-side so i can't use any server-side method.

17 Apr 2014, 10:50 AM
its quite simple. assuming that the userAccount which refers to number field in the 2nd store is unique. you can add a renderer function to that column in the grid:

renderer: function(val)
var record = storeAccounts.findRecord('number', val, 0, false, false true);
return record.get('name');
return val;

if a record with 'number' equal to the value of that row in your grid is found in your 2nd store, then return the 'name' (or whichever field you want to display in your grid's column). Otherwise, just return the value (or you can return an empty string if you dont want to display anything). However, in normal case, findRecord should find a record and the name should be displayed.

you have to take care that the 2nd store is loaded before you load the first one so that the correct values are displayed in the grid.

17 Apr 2014, 11:24 AM
Ok, I try what you recommend me but it doesn't work or I can't use it but I know if it is a simple problem.
There is a piece of my code where I need that function :

Ext.define('app.view.Transaction', {
extend : 'Ext.grid.Panel',
alias : 'widget.transaction',
title : 'Számlatörténet',
store : 'Transaction',
columns : [
{ header : 'Dátum', width : 90, align : 'center', dataIndex: 'date', renderer : Ext.util.Format.dateRenderer('Y. m. d.')},
{ header : 'Számla', flex : 1, dataIndex : 'userAccount', renderer :!!!!!!! I need there the function !!!!!!},

It is my Account store :

extend : 'Ext.data.Store',
requires : 'app.model.Accounts',
model : 'app.model.Accounts',
autoLoad : true

It is my Account model :

Ext.define('app.model.Accounts', {
extend : 'Ext.data.Model',
fields : [
{ name : 'number', type : 'string' },
{ name : 'currency', type : 'string' },
{ name : 'balance', type : 'int' },
{ name : 'name', type : 'string' }
proxy : {
data : DEMODATA,

Transaction store is the same as an Account store but of course where was account it is replaced with transaction.
Transaction model :

Ext.define('app.model.Transactions', {
extend : 'Ext.data.Model',
proxy: {
type: 'memory',
enablePaging: true,
reader: {
type: 'json',
root: 'transaction',
totalProperty: 'total'

I hope you won't see too much mistake in this codes, but please tell me the concrete code.I get undefined is not a function error message. I tried a lot but as I said i don't know how can I reference to the other store because now i tried to Account.findRecord but it has got the same result, I can't reference :\

17 Apr 2014, 11:33 AM
your code seems fine. what problem are you having? you just have to put the code i gave you where you have the renderer. The only thing you have to change is to replace storeAccounts with your store.

17 Apr 2014, 11:41 AM
Then I should be really lame to this.

I tried to replace it with Account then I get Account is not defined error message and I tried to replace it with app.store.Account too then I get Undefined is not a function. So I really don't know what should I writing here.

17 Apr 2014, 12:06 PM
you have defined your components with Ext.define(). you have to create instances of these to use them. You can assign them to a variables and then use those.

var storeAccounts = Ext.create('app.store.Account');

take a look at the example in the answer here: http://stackoverflow.com/questions/6290729/how-to-use-ext-define-in-extjs-4

17 Apr 2014, 12:40 PM
Thank you for your help, but it don't want to work for me, now I get back the userAccount as a "val" and that's all. It's late for me. I go to bed. Thank you once more. Good night!

17 Apr 2014, 12:42 PM
i think you are getting closer. try using some debugging tool (e.g. press F12 in Chrome to launch it) or install Firebug plugin in Firefox and then you can set breakpoints and observe what is going on or use console.log() to print values of variables to keep a watch on them. Hopefully, you will get it working tomorrow. Good night.