How to use Template in rowexpander plugin - Ext JS 4 - plugins

Question

Can we use template as follows:
plugins: [{
ptype: 'rowexpander',
selectRowOnExpand : false,
rowBodyTpl: new Ext.XTemplate(
'<p>Qusetions: {question}</p><p>',
'<tpl for="option">',
'<p>{option[0]}</p>',
'</tpl></p>'
)
}]
I am unable to see anything. I have this JSON:
{
"total": 2,
"data": [
{
"qno":1,
"question":"What's Your Fav color",
"option":['red','green','blue']
},
{
"qno":2,
"question":"What's Your coom color",
"option":['yellow','red','green','blue']
}
]
}
Model File
Ext.define('AM.model.Question', {
extend: 'Ext.data.Model',
fields: [
{name: 'question'},
{name: 'option'},
{name: 'images'},
{name: 'qno'}
]});
I want to see the output as follows:
+ Questions: What is your fav color
<radiobutton> Red
<radiobutton> Green
<radiobutton> Blue
Am using Ext JS 4.1 version
Thanks in advance for your answers

Answer 1

When iterating through an array using XTemplate, the current item is referred to using {.}. Your template should look something like this:
'<p>Questions: {question}</p>',
'<p>',
'<tpl for="option">',
'<p>{.}</p>',
'</tpl>',
'</p>'
However, it gets a little more tricky if you want to do a radio group. XTemplate provides the parent property to access objects outside of the current context. So instead of a <p> tag in the middle, your radio group might look like this:
'<tpl for="option">',
'<input type="radio" name="qno_{parent.qno}" value="{.}" />{.}<br/>'
'</tpl>'