View Full Version : Client-side table/store JOIN

19 Jan 2012, 8:07 AM
Hey guys,

I've run in to a problem that I simply can't find any good solution for, then again I'm rather new with ExtJS.

Here's the scenario: I have a GridView that displays purchase orders. The backend database consists of course of several tables, such as orders, customers and salesperson.

Now - if I have all these tables (orders, customers, salespersons) loaded into separate stores, how do I "join" them in the GridView? I'd rather just have the id's loaded in the order-model, and somehow combine it with data from other stores when rendering the grid.

Any ideas are greatly appreciated!

19 Jan 2012, 8:21 AM
You could look into this http://docs.sencha.com/ext-js/4-0/#!/guide/data
and http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Model

The associations part

19 Jan 2012, 8:29 AM
Thanks, I've looked through the docs for days without figuring it out. I've tried to figure it out using associations but without any luck. The problem (for me) is that the "main row" (order) can have many users, and a user can have many orders... there's just an association everywhere. And all of this needs to be editable through a form.

The form part was initially pretty straight-forward. Using a combobox with it's own store-property, display- and valueFields did the trick. But in another scenario (another user logged in to the app), I don't want that combobox to be editable or visually similar to a textbox -just displayed as a simple textstring. So, I turned to displayfield, which in turn doesn't support these properties...

20 Jan 2012, 6:34 PM
Hi again,

Perhaps I was a bit unclear, or more likely I'm not yet able to build a complete ExtJS application "the right way"... To try and make this a bit simpler, let's change the question.

I have a GridView where all the rows and columns are loaded from one table into one single store.

One of these columns are called "Person_ID" and contains just a number - 1, 2, 3 ,4 etc. How can I replace this value (in the grid) with the corresponding string (using that ID) from another store? I'm thinking I need to use a renderer function on the column but I haven't gotten much further.

Also, I'm worried the renderer-implementation might impact performance when there's a lot of rows but I really have no clue.

Thanks again for your time!

23 Jan 2012, 12:58 AM
I think you must do this with a renderer on the column. The association thing in new in ExtJs 4. It is missing some functionality to get it working nicely. For example display multiple models in one grid.

For things like that .. I do the linked grids with a server in between. Select row --> call to server ---> display return values somewhere.

But back to your question. I don't know if the renderer effects the performance much. Probably not.

28 Jan 2012, 4:35 PM
Thanks for your reply twanzoeleven. It's working pretty good and there is no obvious effect on performance.

However I do have some problems which I guess is related to the other store not beeing fully loaded yet, when the application starts the renderer function can't find any values. Though when the GUI is fully loaded I can click the grid's reload-button and it all renders correctly.

renderer: function(value){
var storeUsers = Ext.data.StoreManager.lookup('Users');
var userRec = storeUsers.findRecord('USERID', value);
if ( ! Ext.isObject(userRec)) {
return value;
} else {
return userRec.data.NAME;

Do you have any pointers on how to solve this? In my app.js I've set the store as required, and even tried moving it to the top above everything else.


29 Jan 2012, 2:13 AM
Maybe try to make a call to the users store loadfunction first at app startup before you render the grid and other stores

1 Feb 2012, 4:29 AM
Thanks for all your help. In the end it turned out, of course, that I had missed something. I did declare the store in Ext.require(), but I had forgotten to put it in my Ext.application.stores...