2013-01-03 59 views
1

我正在extjs工作。我想創建視圖,以便它將顯示20個問題和每個問題以及其單選按鈕的選項。這些問題我使用yii框架從數據庫中撤回。我創造了視圖=在extjs如何使用組radioButton

View= 

Question.js

Ext.define('Balaee.view.question.Question', { 
    extend: 'Ext.form.Panel', 
    requires: [ 
     'Balaee.view.question.QuestionView'], 
    id: 'QuestionId', 
    alias: 'widget.question', 
    title: 'Question', 
    height: 180, 
    items: [{ 
     xtype: 'questionView', 
    }, 

    ], //end of items square 
    buttons: [{ 
     xtype: 'button', 
     fieldLabel: 'Vote', 
     name: 'vote', 
     formBind: true, 
     text: 'submit', 
     action: 'voteAction', 
    }] 
}); 

QuestionView.js

Ext.define('Balaee.view.question.QuestionView', { 
    extend: 'Ext.view.View', 
    id: 'QuestionViewId', 
    alias: 'widget.questionView', 
    store: 'Question', 
    config: { 
     tpl: '<tpl for=".">' + 
      '<div id="main">' + 
      '</br>' + 
      '<b>Question :-</b> {question}</br>' + 
     //'<p>-------------------------------------------</p>'+ 

     '<tpl for="options">' + // interrogate the kids property     within the data 
     '<p>&nbsp&nbsp<input type="radio" name="opt" >&nbsp{option} </p>' + 
      '</tpl></p>' + 

      '</div>' + 
      '</tpl>', 
     itemSelector: 'div.main', 
    } 
}); 

因此,如何利用組單選按鈕來顯示選項,以便提交按鈕點擊後,它會給我所有用戶選擇的單選按鈕選項作爲用戶的選擇。請幫助我...

回答

0

Y你想在一個頁面上提出幾個問題,對嗎?

首先,你必須改變你的TPL一點點

  '<p>&nbsp&nbsp<input type="radio" name="opt{questionNumber}" >&nbsp{option} </p>'+ 

您可以輸入簡單的查詢使用Ext.dom.Query之後:

xtype:'button', 
fieldLabel:'Vote', 
name:'vote', 
FormBind:true, 
text:'submit', 
listeners: { 
    click: function(btn,e,eOpts) { 
     var answers = Ext.core.DomQuery.select("input[type='radio']:checked"); 

      //e.g.: sending the data via AJAX-call to the server 
      Ext.Ajax.request({ 
      url: ' //e.g. answers.php', 
      method: 'POST', 
      params: { 
       answers: answers 
      }, 
      success: function(response) { 
       //do something 
      }, 
      failure: function(response) { 
       //do something 
      } 
    } 
} 

這將返回所有選中的單選按鈕!

+0

thanx先生爲您的答覆。我像上面那樣改變了tpl。但是在哪裏包含上面的查詢?它會在提交按鈕的點擊事件?實際上,我對extjs非常陌生。那麼你能幫我嗎? – user1722857

+0

你需要一個click-listner!例如,您可以通過按鈕(xtype:'button')直接創建偵聽器。 – harry