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