plugins - 如何在 rowexpander 插件中使用模板 - Ext JS 4

Question

我们可以使用模板如下：

        plugins: [{
            ptype: 'rowexpander',
            selectRowOnExpand : false,  
            rowBodyTpl: new Ext.XTemplate(
                '<p>Qusetions: {question}</p><p>',
                '<tpl for="option">',
                        '<p>{option[0]}</p>',
                    '</tpl></p>'
                )
            }]

我什么也看不见。我有这个 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']
        }
     ] 
      }

模型文件

Ext.define('AM.model.Question', {
     extend: 'Ext.data.Model',
     fields: [
      {name: 'question'},
      {name: 'option'},
      {name: 'images'},
      {name: 'qno'}
]});

我想看到如下输出：

  + Questions: What is your fav color

        <radiobutton> Red
        <radiobutton> Green
        <radiobutton> Blue

我正在使用 Ext JS 4.1 版本

提前感谢您的回答

Answer 1

当使用 XTemplate 遍历数组时，当前项使用{.}. 您的模板应如下所示：

'<p>Questions: {question}</p>',
'<p>',
'<tpl for="option">',
    '<p>{.}</p>',
'</tpl>',
'</p>'

但是，如果你想做一个广播组，它会变得有点棘手。XTemplate 提供了parent访问当前上下文之外的对象的属性。因此<p>，您的广播组可能看起来像这样，而不是中间的标签：

'<tpl for="option">',
    '<input type="radio" name="qno_{parent.qno}" value="{.}" />{.}<br/>'
'</tpl>'