ExtJS 4 Show data from several stores in the grid

Question

I have 2 models - for example, users and orders

Ext.define('AM.model.User', { extend: 'Ext.data.Model', fields: ['id', 'username', 'firstName', 'lastName', 'state', 'city'], associations: [ { type: 'hasMany', model: 'Order', name: 'orders' },], }); Ext.define('AM.model.Order', { extend: 'Ext.data.Model', fields: ['id', 'userId', 'date', 'description', 'value'], belongsTo: 'User', }); 

and their stores. I am looking for a way to display data from both repositories in a grid. (so my columns would be firstName , lastName , orderDate , orderDescription , orderValue ...

What is the correct way to display them?

Thanks.

Answer 1

You must do this using server-side code and get all the data in one repository.

Answer 2

If you want to do this using associations, you need to define a renderer for the grid column.
Like this:

 { text: "orderDescription", renderer: function(value,meta,record){//1. //var orderStore = record.orderStore;//2a. //var orderList = ordersStore.data.items;//2b. var orderList = record.orders().data.items; //3.This line is the same as 2 the lines above(2a,2b). var order = orderList[0]; //4. TODO..loop through your list. var description = order.data.description; //5. return description ; }, 

I will try to explain to everyone who wants to do it this way.

• The third parameter is the current record in your "Custom" store, which is the renderd for the grid. The first two must be there to get a record. Leaving them will fail.
  
  
• 1a / 1b. I left them there to demonstrate how the association works. Basically, each entry in your "Custom" store gets its own "orderStore". It will be called "ordersStore" because you entered your association [name: 'orders'] .
• The orders() method is automatically created, again based on the name "orders". This just returns orderStore . The repository contains the data → field, which contains the items field. items is an actual list of orders.
• Now you have access to the list of orders. Now you can sort through orders. Or, if you have only one order, just the first.
• Your order again contains a data field that contains your actual data.
  
  

Answer 3

Let's try the example below -

Step 1: Add Entries from Store 2 to Storage 2.

 var store2 = new Ext.data.Store({ ... }); var store1 = new Ext.data.Store({ ... listeners: { load: function(store) { store2.addRecords({records: store.getRange()},{add: true}); } } }); 

Step 2: Using Entries from Store 2 with Store 1.

For example, the first col data comes from Store 1, and the data from Store 2 forms cols 2 and 3. You can use a visualizer that finds data in the second storage if the “other” columns are just “search”, data, for example:

 var store1 = new Ext.data.Store({ ..., fields: ['field1', 'field2'] }); var store2 = new Ext.data.Store({ ... id: 'field2', fields: ['field2', 'fieldA', 'fieldB'] }); var renderA = function(value) { var rec = store2.getById(value); return rec ? rec.get('fieldA') : ''; } var renderB = function(value) { var rec = store2.getById(value); return rec ? rec.get('fieldB') : ''; } var columns = [ {header: 'Field 1', dataIndex: 'field1'}, {header: 'Field A', dataIndex: 'field2', renderer: renderA}, {header: 'Field B', dataIndex: 'field2', renderer: renderB} ]; 

Good luck.

Ref. from here