0

私はextjs+Yiiフレームワークで作業しています。私のサーバー側はYiiにあり、クライアント側はextjsにあります。私はyiiフレームワークの出力を入力としてextjsに与えています。今Yiiから私はjsonを送っています：

CJSON::encode(array("questionId"=>$questionid,"question"=>Question,"Options"=>$optionList,"CorrectOptionId"=>$CorrectId,"UserSelectedOption"=>$Usersoption));

だから私はjson出力を取得しています：

{"Questions":[
{
            "questionId": 1,
            "question": 'Who will win the series1212?',
            "options": [
                {

                    "optionId":1,
                    "option":'Aus',
                    "questionId":1
                },
                {

                    "optionId": 1,
                    "option": 'india',
                    "questionId":1
                },
                {

                    "optionId": 1,
                    "option": 'England',
                    "questionId":1
                },

            ]
            "CorrectOptionId":1,
            "UserSelectedOption":2,

        } ,{-------}
    ]

}

私はMVCフォーマットのコードを持っています：

QbqnsModel.js

Ext.define('Balaee.model.qb.QbqnsModel',{
    extend: 'Ext.data.Model',
    idproperty:'questionId',//fields property first position pk.
    fields: ['questionId','question','languageId','userId','creationTime','questionStatusId','keyword'],
    hasMany:{
            model:'Balaee.model.qb.QbqnsoptionModel',
            foreignKey:'questionId',
            name:'options',
        },
        proxy:
        {
            type:'ajax',
            api:
            {
            },//end of api
            reader:
            {
                    type:'json',
            },//end of reader
            writer:
            {
                    type:'json',

            },//End of writer
        }

QbQnsStore.js

Ext.define('Balaee.store.qb.QbqnsStore',{
    extend: 'Ext.data.Store',
    model: 'Balaee.model.qb.QbqnsModel',
    autoLoad: true,
    proxy:
    {
        type:'ajax',
        api:
        {

            read:'data/question.json',

        },
        reader:
        {
            type:'json',
            root:'questions',

        }
    }
});

そしてQbqnsview.jsは-

 Ext.define('Balaee.view.qb.qbqns.QbqnsView',
    {
            extend:'Ext.view.View',
            id:'qbqnsViewId',
            alias:'widget.QbqnsView',
            //store:'kp.PollStore',
            store:'qb.QbqnsStore',
            config:
            {
                tpl:'<tpl for=".">'+
                    '<div id="main">'+
                    '</br>'+
                //  '<b>Question :-</b> {pollQuestion}</br>'+
                    '<h1 id="q">Question :-</h1> {question}</br>'+



        '<tpl for="options">'+     // interrogate the kids property within the data '<tpl if="optionId == parent.UserSelectedOption && optionId != parent.CorrectOptionId">'+
'<p>&nbsp&nbsp<input type="radio" name="{parent.questionId}" value="{option}" class="red">&nbsp{option}</p>'+
'</tpl>'+
'<tpl if="optionId == parent.CorrectOptionId">'+
    '<p>&nbsp&nbsp<input type="radio" name="{parent.questionId}" value="{option}" class="green">&nbsp{option}</p>'+
'</tpl>'+
'<tpl if="optionId != parent.CorrectOptionId && optionId != parent.UserSelectedOption">'+
    '<p>&nbsp&nbsp<input type="radio" name="{parent.questionId}" value="{option}">&nbsp{option}</p>'+
'</tpl>'+
                '</tpl></p>'+
                '<p>---------------------------------------------------------</p>'+
                '</div>'+
                '</tpl>',
            itemSelector:'div.main',    
        }
});// End of login class

質問とそのオプションが正しく表示されています。ボタンをクリックすると、すべての質問、オプション、実際の正しいオプション、およびユーザーが選択したオプションをもう一度表示したいと思います。だから私はこれを上記のjson出力をextjsストアにバインドし、質問を表示するためのビューを作成したいと思います。ラジオボタンを介したオプション、緑色の正しいオプション。それで、そのようなビューを表示するためにextjsパーツを設計する方法。私はextjsを初めて使用します...だから私を案内してくれませんか...

4

2 に答える 2

0

以下のサンプルコードを使用できます-

        var store = new Ext.data.JsonStore({
            url: 'get-images.php',
            root: 'images',
            fields: [
                'name', 'url',
                {name:'size', type: 'float'},
                {name:'lastmod', type:'date', dateFormat:'timestamp'}
            ]
        });
        store.load();

        var tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="{url}" title="{name}"></div>',
                '<span class="x-editable">{shortName}</span></div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        );

        var panel = new Ext.Panel({
            id:'images-view',
            frame:true,
            width:535,
            autoHeight:true,
            collapsible:true,
            layout:'fit',
            title:'Simple DataView',

            items: new Ext.DataView({
                store: store,
                tpl: tpl,
                autoHeight:true,
                multiSelect: true,
                overClass:'x-view-over',
                itemSelector:'div.thumb-wrap',
                emptyText: 'No images to display'
            })
        });
        panel.render(document.body);
于 2013-02-04T05:38:48.293 に答える
0

あなたの特定の質問のために-forループで以下のコードを使用してください-

    '<tpl if="optionId == parent.UserSelectedOption && optionId != parent.CorrectOptionId">'+
    '<p>&nbsp&nbsp<input type="radio" name="{parent.questionId}" value="{option}" class="red">&nbsp{option}</p>'+
    '</tpl>'+
    '<tpl if="optionId == parent.CorrectOptionId">'+
        '<p>&nbsp&nbsp<input type="radio" name="{parent.questionId}" value="{option}" class="green">&nbsp{option}</p>'+
    '</tpl>'+
    '<tpl if="optionId != parent.CorrectOptionId && optionId != parent.UserSelectedOption">'+
        '<p>&nbsp&nbsp<input type="radio" name="{parent.questionId}" value="{option}">&nbsp{option}</p>'+
    '</tpl>'+
于 2013-02-04T06:43:27.430 に答える