如何为 json 文件创建 extjs 视图

Question

我正在使用 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 很陌生...所以请您指导我...

Answer 1

您可以使用下面的示例代码 -

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

Answer 2

对于您的具体问题- 在 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>'+