2012-07-15 5 views
7

テキストメッセージのリストとメッセージを送信した関連ユーザの名前を表示する、基本的なSencha Touchアプリケーションを開発中です。モデルの関連付けを設定する方法については、オンラインでチュートリアルに従ってきましたが、各チュートリアルではサーバーがネスト構造のデータを生成することを前提としています。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." 
    }] 
} 
+0

問題なく動作しますか? –

答えて

1

私は本当に団体で働いたことがないと私はリクエストに応じて2つの店舗をロードすると何かを見つけようとする文書を経て、私は何かを見つけることができませんでした。だからここに私はそれを行うだろう方法は次のとおりです。

モデル

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

そして、あなたはこのような何かを取得したい:

enter image description here

は、この情報がお役に立てば幸いです。説明が必要な場合は、私に教えてください。

+1

私は解決策を見たいので、私は自分自身で相互参照を行う必要はありません。なぜアソシエーションは単純なビューを達成するのに十分ではないのですか? –

+0

私はまだそれを行う方法を考え出していない... –

関連する問題