How to use Template in rowexpander plugin - Ext JS 4

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

score 0 · Answer 1 · answered Feb 22 '13 at 14:06

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>'

How to use Template in rowexpander plugin - Ext JS 4

1 Answers1