In extjs how to use group radioButton

1
votes

I am working in extjs. i want to create view such that it will dislay 20 questions and each of question along with its options with radio buttons.These questions i am retreiving from database using yii framework. I had created view as =

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

So how to display options using group radio buttons so that after click of submit button, it will give me all user's selected radio buttons option as user's option.Please help me...

2
extjsradio-group

2 Answers

0
votes

You want several questions on one page, right??

First you have to change your tpl a little bit

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

After that you can simple query for the inputs using 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
            }
    }
 }

This will return all checked radio-buttons!