Question

我在extjs工作。我想创建一个视图，它将显示20个问题和每个问题以及它的选项与单选按钮。这些问题我正在使用yii框架从数据库中检索。我创建了视图=

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',
    }
});

那么如何使用组单选按钮显示选项，以便在单击提交按钮后，它将为我提供所有用户选择的单选按钮选项作为用户选项。请帮助我...

Answer 1

你想在一个页面上找几个问题，对吧？

首先你必须稍微改变你的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
            }
    }
 }

这将返回所有已检查的单选按钮！

Answer 2

检查此示例，我认为它很有用http://cdn.sencha.com/ext-4.1.1a-gpl/examples/form/check-radio.html

在extjs中如何使用group radioButton

2 个答案: