1

我有两家商店，Assessor.store.Question和Assessor.store.Choice，以及它们各自的模型和代理。按预期从服务器加载数据。我也有一个Assessor.view.QuizCards具有“卡片”布局的面板。这很好用，我可以创建虚拟卡，并使用控制器Assessor.view.QuestionCard很好地浏览它们。Assessor.controller.Quiz

我需要帮助的是以编程方式在我的QuizCards面板中填充来自Questions和Choices商店的问题和选择。我已经尝试了基于文档我能想到的所有东西，但绝对没有成功。

具体来说，我希望on a"value"成为商店/模型的属性。中的值应该来自关联的商店/模型。"displayfield"QuestionCard"text"Question"boxlabel""radiogroup"Choice

详细代码如下。感谢您提供的任何指导。

Ext.define('Assessor.controller.Quiz', {
    extend: 'Ext.app.Controller',
    itemId: 'quizcontroller',
    models: ['Question', 'Choice'],
    stores: ['Question', 'Choice'],
    views: ['QuestionCard'],
// Constants, kinda
    NUM_QUESTIONS: 4,
// Custom Functions
    /**
     * create store instances
     */
    createStores: function(){
        if (Ext.getStore('questionstore') == null) {
            var qs = Ext.create('Assessor.store.Question');
            qs.load();
        };
        if (Ext.getStore('choicestore') == null) {
            var cs = Ext.create('Assessor.store.Choice');
            cs.load();
        };
    }, //end createStores
    /**
     * update buttons
     */
    updateButtons: function(){
        var index = this.getCardIndex();
        var nb = Ext.ComponentQuery.query('#nextbutton')[0];
        var pb = Ext.ComponentQuery.query('#prevbutton')[0];
        var fb = Ext.ComponentQuery.query('#finishbutton')[0];
        if (index<this.NUM_QUESTIONS) {
            nb.enable();
            fb.disable();
        } else {
            nb.disable();
            fb.enable();
        };
        if (index>0){
            pb.enable();
        } else {
            pb.disable();
        };
    }, //end updateButtons
    /**
     * get active question card index
     */
    getCardIndex: function(){
        return (Ext.ComponentQuery.query('quizcards')[0].getLayout().activeItem.itemId.split('-')[1]);
    },
    /**
     * set active question card index
     */
    setCardIndex: function(index){
        Ext.ComponentQuery.query('quizcards')[0].getLayout().setActiveItem('questioncard-'+index);
    },
    /**
     * start the quiz
     */
    startQuiz: function(args) {
        this.createQuestionCards();
        var sb = Ext.ComponentQuery.query('#startbutton')[0];
        sb.disable();
        this.updateButtons();
    },
    /**
     * create the UI cards with questions from server.
     */
    createQuestionCards: function() {
        var qc =  Ext.ComponentQuery.query('quizcards')[0];
        for (i=0; i<this.NUM_QUESTIONS; i++) {
            card = Ext.create('Assessor.view.QuestionCard');
            card.itemId = 'questioncard-' + i.toString();
            qc.add(card);
        };
        this.updateButtons();
    },
    /**
     * finishQuiz -- finishes and scores the quiz
     * @param {Object} args
     */
    finishQuiz: function(args) {
        this.localState.set('quizFinished', true);
    },
    //
    nextQuestion: function(args) {
        console.log('\nnextQuestion');
        var cardlayout = Ext.ComponentQuery.query('quizcards')[0].getLayout();
        var activeIndex = cardlayout.activeItem.itemId.split('-')[1];
        console.log(activeIndex);
        if (activeIndex < this.NUM_QUESTIONS) {
            activeIndex++;
            this.setCardIndex(activeIndex);
        };
        this.updateButtons();
    },
    //
    prevQuestion: function(args) {
        console.log('\nprevQuestion');
        var cardlayout = Ext.ComponentQuery.query('quizcards')[0].getLayout();
        var activeIndex = cardlayout.activeItem.itemId.split('-')[1];
        console.log(activeIndex);
        if (activeIndex > 0) {
            activeIndex--;
            this.setCardIndex(activeIndex);
        };
        this.updateButtons();
    },
     //
     init: function(){
         this.control({
            '#nextbutton': {
                click: this.nextQuestion
            },
            '#prevbutton': {
                click: this.prevQuestion
            },
            '#startbutton': {
                click: this.startQuiz
            },
            '#finishbutton': {
                click: this.finishQuiz
            },
        })
    }
})

Ext.define('Assessor.view.QuizCards', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.quizcards',
    itemId: 'quizcards',
    layout: 'card',
    activeItem: 0,
    items: []
})

Ext.define('Assessor.view.QuestionCard', {
    extend: 'Ext.form.Panel',
    alias: 'widget.questioncard',
    layout: 'anchor',
    items: [{
        xtype: 'displayfield',
        itemId: 'questionfield',
        name: 'questionfield',
        fieldLabel: 'Question',
        value: ''
    }, {
        xtype: 'radiogroup',
        itemId: 'choicegroup',
        columns: 1,
        vertical: true,
        items: [{
            boxLabel: '',
            name: 'choice',
            value: 1
        }, {
            boxLabel: (100*Math.random()),
            name: 'choice',
            value: 2
        }, {
            boxLabel: (100*Math.random()),
            name: 'choice',
            value: 3
        }]
    }]
})

Ext.define('Assessor.store.Question', {
    extend: 'Ext.data.Store',
    autoLoad: true,
    autoSync: true,
    model: 'Assessor.model.Question',
    storeId: 'questionstore'
})

Ext.define('Assessor.model.Question', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'text', type: 'string'},
        {name: 'resource_uri', type: 'string'}
    ],
    proxy: {
        type: 'rest',
        url: '/api/v1/question/',
        headers: {
            'accept':'application/json',
            'content-type':'application/json'
        },
        noCache: false,
        reader: {
            type: 'json',
            root: 'objects',
            idAttribute: 'id'
        },
        writer: {
            type: 'json'
        }
    }
})

选择模型和商店相似，如果需要我会发布它们。谢谢

4

1 回答 1

0

我首先建议的是变得Assessor.view.QuestionCard更聪明。我会initComponent在那里重写并在施工期间从商店传递记录。这样，您将拥有在内部创建特定 UI 元素的所有逻辑，Assessor.view.QuestionCard并可以这样称呼它：

card = Ext.create('Assessor.view.QuestionCard', {
   questionRecord: rec,
   lastQuestion: true/false...
   ... whatever else you need 
})
于 2012-05-22T01:17:25.710 回答