How to create extjs view for json file

Question

I am working in extjs + Yii framework. my server side is in Yii and client side is in extjs. I am giving yii framework output to extjs as input. Now from Yii i am sending json:

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

So i am getting json output:

{"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,

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

}

I have MVC formatted code:

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

        }
    }
});

And Qbqnsview.js as-

 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

It is displaying questions and its options correctly. Now on click of button i want to show once again all questions,options,its actual correct option and user selected option. So i want to bind this above json output to extjs store and want to create view to display question,its options via radio buttons,correct option in green color. So how to design extjs part to display such view . i am very new to extjs...So can you please guide me...

Answer 1

For your specific question- use below code with in for loop -

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

Answer 2

You can use sample code below -

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