在没有嵌套的情况下在Sencha Touch中加载关联的数据

Question

我正在研究基本的Sencha Touch应用程序，该应用程序显示文本消息列表以及发送消息的关联用户的名称。我在线学习了关于如何设置模型关联的教程，但每个教程都假设服务器使用嵌套结构生成数据。

我正在使用的数据具有主键/外键关系的扁平结构，我无法弄清楚如何让Sencha从单个响应中加载两个存储。

模型/ user.js的

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

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

存储/ Users.js

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

存储/ Messages.js

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

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

消息被我的应用程序（下面的示例JSON响应）正确加载和显示，但我无法弄清楚如何让相关用户加载到商店中。这可以通过配置解决，还是需要一个自定义阅读器？任何帮助感谢！

样品JSON

{ 
    "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

我从来没有真正与协会合作，我通过文档去试图找到的东西，会在请求负载两家店有，但我无法找到任何东西。因此，这里是我会怎么做：

型号

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

房屋

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

列表

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

你会得到这样的事情：

希望这有助于。如果你需要解释，让我知道。