docs - ExtJS 4 Muestra datos de múltiples tiendas en la grilla

extjs docs

Question

Tengo 2 modelos, por ejemplo, usuarios y pedidos

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'',   
});

y sus tiendas. Estoy buscando una forma de mostrar datos de ambas tiendas en la grilla. (entonces mis columnas serían firstName , lastName , orderDate , orderDescription , orderValue ...

¿Cuál es la forma correcta de mostrarlos?

Gracias.

Answer 1

Debería hacer esto con su código del lado del servidor y obtener todos estos datos en una sola tienda.

Answer 2

Si desea hacer esto con asociaciones, necesita definir un procesador para su columna de cuadrícula.
Al igual que:

{
        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 ;
 },

Trataré de explicarle a cualquiera que quiera hacerlo de esta manera.

1. El tercer parámetro es el registro actual en su tienda ''User'' que se está renderizando para la grilla. Los primeros dos solo necesitan estar allí, para recibir el registro. Dejarlos afuera no funcionará.
   
   
2. 1a / 1b. Los dejé allí para demostrar cómo funciona la asociación. Básicamente, cada registro en su tienda de "Usuario" obtiene su propia "tienda de pedidos" correspondiente. Se llamará ''ordersStore'' porque ingresó su asociación [name: ''orders''] .
3. El método orders() se crea automáticamente, de nuevo según el nombre ''orders''. Esto simplemente devuelve el orderStore . La tienda contiene data campo -> que contiene un items campo. items es la lista real de pedidos.
4. Ahora tiene acceso a su lista de pedidos. Puede recorrer las órdenes ahora. O si solo tiene un pedido, solo el primero.
5. Su order nuevamente contiene data campo que contienen sus datos reales.
   
   

Answer 3

Vamos a intentar con el siguiente ejemplo-

Paso 1: Agregar registros de la Tienda 2 a la Tienda 2.

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

Paso 2: Usar registros de la Tienda 2 con la Tienda 1.

Por ejemplo, la primera columna de datos proviene de la Tienda 1 y los datos de la Tienda 2 forman las columnas 2 y 3. Puede usar un representador que encuentra los datos en la segunda tienda si las "otras" columnas son solo datos de "búsqueda", por ejemplo :

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}
];

La mejor de las suertes.

Árbitro. de aquí