Dynamic Number of Radio fields - sencha-touch-2

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: []
}

Answer 1

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