Ładowanie powiązanych danych w Sencha Touch bez zagnieżdżania

Question

Pracuję na podstawowej aplikacji Sencha Touch, która wyświetla listę wiadomości tekstowych i nazwę powiązanego użytkownika, który wysłał wiadomość. Skorzystałem z tutoriali online na temat konfiguracji powiązań modeli, ale w każdym tutorialu założono, że serwer generuje dane o strukturze zagnieżdżonej.

Dane, z którymi pracuję, mają płaską strukturę z relacjami klucza głównego/obcego i nie mogę wymyślić, jak zmusić Sencha do załadowania obu sklepów z pojedynczej odpowiedzi.

modelu/user.js

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

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

sklep/Users.js

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

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

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

sklep/Messages.js

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

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

Komunikaty są poprawnie ładowane i wyświetlane przez moją aplikację (przykładowa odpowiedź JSON poniżej), ale nie mogę wymyślić, jak pobrać powiązanych użytkowników do sklepu. Czy można to rozwiązać za pomocą konfiguracji, czy też potrzebuję niestandardowego czytnika? Każda pomoc doceniona!

JSON Próbka

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

Ja naprawdę nigdy nie pracował ze stowarzyszeniami i udałem się po dokumencie, aby spróbować znaleźć coś, co by załadować dwa sklepy z na żądanie, ale nie mogłem znaleźć niczego. Tak oto w jaki sposób to zrobić:

model

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

Stores

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

A chcesz uzyskać coś takiego:

nadzieję, że to pomaga. Jeśli potrzebujesz wyjaśnienia, daj mi znać.