如何爲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 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 

這是正確顯示的問題和它的選項。現在點擊按鈕，我想再次顯示所有問題，選項，其實際的正確選項和用戶選擇的選項。 所以我想要將上面的json輸出綁定到extjs存儲並且想要創建視圖來顯示問題，它通過單選按鈕的選項，正確的綠色選項。那麼如何設計extjs部分來顯示這樣的視圖。我是很新的ExtJS的......所以，你可以請指導我...

Answer 1

對於下面的代碼特定question- 用在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>'+ 

Answer 2

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

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