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>'+

如何为json文件创建extjs视图

2 个答案: