関連付けられたモデル ストアからデータを取得しようとして行き詰まりました。私が達成しようとしていることの簡単な概要を説明させてください。
クイズのリストが必要です。クイズをタップすると、質問のリストが表示されます。質問をタップすると、関連する多肢選択式の回答 (ボタン付きのデータビューまたは別のリスト) が表示されます。
以前のベータ版では、フラット ツリー ストアを使用してクイズを表示していましたが、これでは美学が制限され、データを API と簡単に同期できませんでした。そのため、代わりに関連するモデルを機能させようとしています。同様の問題がオンラインで見つかりましたが、私が求めているものを完全に得ることができません。
関連するコードは次のとおりです（MVCセットアップ内）。関連する 3 つのモデルがあります。
QuizModel.js:
app.models.QuizModel = Ext.regModel("QuizModel", {
fields: [
{ name: 'id', type: 'int' },
{ name: 'studentid', type: 'int' },
{ name: 'dateAllocated', type: 'string' },
{ name: 'category', type: 'string' },
],
associations: [
{type: 'hasMany', model: 'QuestionModel', name: 'questions'},
],
proxy: {
type: 'rest',
actionMethods: {create: "POST", read: "POST", update: "PUT", destroy: "DELETE"},
url: 'http://localhost/bm/core/api/quiz',
reader: {
type: 'json',
root: 'quizes'
}
}
});
app.stores.QuizStore = new Ext.data.Store({
model: "QuizModel",
storeId: 'quizStore'
});
QuestionModel.js:
app.models.QuestionModel = Ext.regModel("QuestionModel", {
fields: [
{ name: 'id', type: 'int' },
{ name: 'quizmodel_id', type: 'int'},
{ name: 'prompt', type: 'string' },
{ name: 'level', type: 'int' },
{ name: 'categoty', type: 'string' }
],
associations: [
{type: 'hasMany', model: 'AnswerModel', name: 'answers'},
{type: 'belongsTo', model: 'QuizModel'}
]
});
AnswerModel.js:
app.models.AnswerModel = Ext.regModel("AnswerModel", {
fields: [
{ name: 'id', type: 'int' },
{ name: 'questionmodel_id', type: 'int' },
{ name: 'prompt', type: 'string' },
{ name: 'correct', type: 'string' }
],
associations: [
{type: 'belongsTo', model: 'QuestionModel'}
]
});
QuizController.js:
app.controllers.QuizController = new Ext.Controller({
index: function(options) {
console.log('home');
},
quizTap: function(options){
var currentQuiz = app.stores.QuizStore.getAt(options.index);
var questions = currentQuiz.questions().load().getAt(0);
app.views.questionList.updateWithRecord(questions);
app.views.viewport.setActiveItem(
app.views.questionList, options.animation
);
}
});
最後に、残りの API 応答は次のようになります。
{
"status" : true,
"quizes" : [{
"id" : "1",
"category" : "Privacy",
"date_allocated" : "1329363878",
"questions" : [{
"id" : "1",
"prompt" : "Lorem ipsum dolor sit amet?",
"answers" : [{
"id" : "1",
"correct" : "1",
"prompt" : "yes"
},
{
"id" : "2",
"correct" : "0",
"prompt" : "no"
}]
}]
}]
}
これにより、次の結果が得られます。
「キャッチされないエラー: ServerProxy を使用していますが、URL が指定されていません。」.
現在、QuizModel には REST API と通信するために必要なプロキシがありますが、questions() からの読み込みにはデフォルトのプロキシが使用されているようです。必要なパラメーター (URL と必要な API キーを含む) を使用してロード呼び出しを構成しようとしましたが、うまくいかないようです。これをどのように行うべきかについてのドキュメントが見つからないようで、関連するほとんどの投稿は localstorage についてのみ説明しています。助けてください！
編集：質問リストビューを追加：
BuddeMobile.views.QuestionList = Ext.extend(Ext.Panel, {
title: 'Quiz',
iconCls: 'quiz',
cls: 'question',
scroll: 'vertical',
initComponent: function(){
Ext.apply(this, {
dockedItems: [{
xtype: 'toolbar',
title: 'Quiz'
}],
items: [{
xtype: 'list',
itemTpl: '<div class="quiz-question">{prompt}</div>',
store: 'quizStore',
listeners: {
itemtap: function (list, index, el, e){
console.log('question tap',el);
}
}
}]
});
BuddeMobile.views.QuestionList.superclass.initComponent.call(this, arguments);
},
updateWithRecord: function(record) {
var toolbar = this.getDockedItems()[0];
toolbar.setTitle(record.get('category')); //works
var list = this.items.get(0);
console.log(record.questions()); //prints out mixed collection of questions
var question1 = record.questions().getAt(0); //testing
console.log(question1.answers()); //prints out mixed collection for first question's answers
list.update(record.questions()); //does not work. How can I populate the list??
}
});
ご覧のとおり、必要なデータを取得できます (ログイン時にストアをロードするため) が、リストでデータのサブセットを使用する方法がわかりません。更新機能を試してみましたが、あまり効果がありません!