Cargando datos asociados en Sencha Touch sin anidar

Question

Estoy trabajando en una aplicación Sencha Touch básica que muestra una lista de mensajes de texto y el nombre de un usuario asociado que envió el mensaje. He seguido los tutoriales en línea sobre cómo configurar asociaciones de modelos, pero cada tutorial supone que el servidor produce datos con una estructura anidada.

Los datos con los que estoy trabajando tienen una estructura plana con relaciones de clave primaria/externa, y no puedo entender cómo hacer que Sencha cargue ambas tiendas desde una única respuesta.

modelo/user.js

Ext.define('App.model.User', { 
    extend: 'Ext.data.Model', 

    config: { 
     fields: [ 
      { name: 'uid', type: 'number' }, 
      { name: 'name', type: 'string' }, 
     ] 
    } 
}); 

tienda/Users.js modelo

Ext.define('App.store.Users', { 
    extend: 'Ext.data.Store',              

    config: {                  
     model: 'App.model.User',             
     autoLoad: true, 
    } 
}); 

/Message.js

Ext.define('App.model.Message', { 
    extend: 'Ext.data.Model', 

    config: { 
     fields: [ 
      { name: 'id', type: 'number' }, 
      { name: 'uid', type: 'number' }, 
      { name: 'message', type: 'string' } 
     ], 

     associations: [{ 
      type: 'belongsTo', 
      model: 'App.model.User', 
      primaryKey: 'uid', 
      foreignKey: 'uid' 
     }], 

     proxy: { 
      type: 'jsonp', 
      url: 'messages.json', 

      reader: { 
       type: 'json', 
       rootProperty: 'req_messages' 
      } 
     } 
    } 
}); 

tienda/Messages.js

Ext.define('App.store.Messages', { 
    extend: 'Ext.data.Store', 

    config: { 
     model: 'App.model.Message', 
     autoLoad: true, 
    } 
}); 

Los mensajes son cargados y mostrados correctamente por mi aplicación (respuesta JSON de muestra a continuación), pero no puedo encontrar la manera de hacer que los usuarios asociados se carguen en la tienda. ¿Se puede resolver esto con una configuración o necesitaré un lector personalizado? Cualquier ayuda apreciada!

JSON Muestra

{ 
    "users": [{ 
     "uid": "1", 
     "name": "John" 
    }, { 
     "uid": "3033", 
     "name": "Noah" 
    }], 
    "req_messages": [{ 
     "id": "539", 
     "uid": "1", 
     "message": "my message" 
    }, { 
     "id": "538", 
     "uid": "1", 
     "message": "whoops" 
    }, { 
     "id": "534", 
     "uid": "3033", 
     "message": "I love pandas." 
    }] 
} 

Answer 1

Nunca he trabajado con asociaciones y fui por el documento para tratar de encontrar algo que cargar con dos tiendas en la solicitud, pero no pude encontrar nada. Así que aquí está la forma en que lo haría:

Modelo

Ext.define('App.model.User', { 
    extend: 'Ext.data.Model', 

    config: { 
     fields: [ 
      'uid', 
      'name' 
     ] 
    } 
}); 

Ext.define('App.model.Message', { 
    extend: 'Ext.data.Model', 

    config: { 
     fields: [ 
      'id', 
      'message', 
      'uid' 
     ], 
     associations: { type: 'hasOne', model: 'User', primaryKey: 'uid', foreignKey: 'uid'} 
    } 
}); 

Tiendas

Ext.define('App.store.Users', { 
    extend: 'Ext.data.Store',              

    config: {                  
     model: 'App.model.User', 
     autoLoad: true, 

     proxy: { 
      type: 'ajax', 
      url: 'http://www.titouanvanbelle.fr/test.json', 

      reader: { 
       type: 'json', 
       rootProperty: 'users' 
      } 
     }, 

     listeners:{ 
      load:function(s,r,success,op){ 
      var msgs = JSON.parse(op.getResponse().responseText).req_messages; 
      Ext.each(msgs, function(msg) { 
       Ext.getStore('Messages').add(Ext.create('App.model.Message',msg)); 
      }); 
      } 
     } 
    } 
}); 

Ext.define('App.store.Messages', { 
    extend: 'Ext.data.Store', 

    config: { 
     model: 'App.model.Message' 
    } 
}); 

Lista

Ext.define("App.view.Main", { 
    extend: 'Ext.Panel', 

    config: { 
    fullscreen: true, 
    layout:'fit', 
    items: [{ 
     xtype:'list', 
     store:'Messages', 
     itemTpl: new Ext.XTemplate(
      '<tpl for=".">', 
      '{[this.getUserName(values)]} : {message}', 
      '</tpl>', 
      { 
      getUserName(v){ 
       var s = Ext.getStore('Users'), 
        u = s.getAt(s.find('uid',v.uid)); 
       return u.get('name'); 
      } 
      } 
    ) 
    }] 
    } 
}); 

Y se obtendría algo como esto:

Espero que esto ayude. Si necesita una explicación, hágamelo saber.