Dynamic Number of Radio fields

Question

I'm trying to create a multiple choice class where I pass in the question and anywhere from 2 to 8 possible answers from which the user must choose one. How can I dynamically pass my items to my class, and create a new radiofield for each possible answer? Here's my current class with two possible answers (Red, White)


    Ext.define('Sencha.view.question.QuestionTypeOne', {
    extend: 'Ext.Container',
    xtype: 'question-type-one',
    requires: [
        'Ext.TitleBar'
        ],
    config: {
        height: '250px',
        width: '250px',
        items: [
            {

                xtype: 'fieldset',
                title: 'What\'s your favorite color?',
                instructions: 'Select one',

                defaults: {
                    xtype: 'radiofield',
                    labelWidth: '40%'
                },
                items: [
                    {
                        name: 'color',
                        value: 'red',
                        label: 'Red'
                    },
                    {
                        name: 'color',
                        value: 'white',
                        label: 'White'
                    }

                ]

            }
        ]
    },

    initialize: function () {
        this.callParent(arguments);
    }
    });

And it would be invoked something like this?

      {
         xtype: 'question-type-one',
         // question: "What's your favorite color?",
         // items: []
      }

ThinkFloyd ThinkFloyd · Accepted Answer · 2013-06-24T06:22:32

while creating view for question-type-one you can pass list of questions/answers and in initialize function you can iterate over this data and add items to you fieldset. For this you might have to keep null config q & a in view class.

var question = Ext.create("Sencha.view.question.QuestionTypeOne", {
  q : "blah blah blah",
  a : {"a1", "a2", "a3"}
});

then in initialize function

initialize: function () {
    this.callParent(arguments);
    var question = this.config.q;
    var answers = this.config.a;
    var container = this.down('fieldset');
    // now iterate over answers and all container.add(answerdfield);
}

Dynamic Number of Radio fields

1 Answers