Sencha Touch 2：List和ListItem數據字段

Question

我想知道如何通過組合不同的JSON數據字段來自定義ListItem內容。

我有三個JSON字段：{caption}，{subCaption}，{source}。

到目前爲止，我已經能夠使用dataMap並使用自定義類來包裝每個文本和樣式。但是，我能夠添加內容的唯一方法是使用應用程序/更新功能順序執行。因此，我的ListItems只是它們自己的行中的{caption}，{subCaption}，{source}。

這裏就是我想每個列表項的樣子：

1. 結合{標題}和{subCaption}文字和創建一個簡短的故事，作爲面板添加此到列表項
2. 渲染{源}在停靠在步驟1中創建的面板右下方的小面板中。

我該怎麼做？蒸餾的問題將是：我如何訪問和組合來自不同JSON字段的數據並呈現到ListItem中？

我現在的ListItem代碼複製如下，以供參考。

一如既往，任何幫助非常感謝！謝謝！

穆罕默德

加利福尼亞州聖何塞，

Ext.define('qxtapp.view.ResultsListItem', { 
    extend: 'Ext.dataview.component.ListItem', 
    requires: [ 
     'qxtapp.view.ResultsListItemCaption' 
     ], 
    xtype : 'resultslistitem', 
    alias : 'widget.resultslistitem', 


    config: { 
     caption: true, 
     subCaption: true, 
     source: true, 
     dataMap: { 
      getCaption: { 
       setHtml: 'caption' 
      }, 
      getSubCaption: { 
       setHtml: 'subCaption' 
      }, 
      getSource: { 
       setHtml: 'source' 
      } 
     }, 
     layout: { 
      type: 'vbox' 
     } 
    }, 
    applyCaption: function(config) { 
     return Ext.factory(config, qxtapp.view.ResultsListItemCaption, this.getCaption()); 
    }, 
    updateCaption: function(newCaption) { 
     if (newCaption) { 
      this.add(newCaption); 
     } 
    }, 
    applySubCaption: function(config) { 
     return Ext.factory(config, Ext.Component, this.getSubCaption()); 
    }, 
    updateSubCaption: function(newSubCaption) { 
     if (newSubCaption) { 
      this.add(newSubCaption); 
     } 
    }, 
    applySource: function(config) { 
     return Ext.factory(config, Ext.Component, this.getSource()); 
    }, 
    updateSource: function(newSource) { 
     if (newSource) { 
      this.add(newSource); 
     } 
    } 
}); 

Ext.define('qxtapp.view.ResultsListItemCaption', { 
    extend: 'Ext.Component', 
    applyHtml: function(caption) { 
     // do some customization to caption and return it 
     return caption; 
    } 
}); 

Answer 1

我不知道爲什麼你需要去克服這些困難，爲什麼在一個簡單的列表中未使用的項目模板？

Ext.define('qxtapp.view.ResultsList', { 
    extend: 'Ext.dataview.List', 
    alias: 'widget.resultslist', 
    config: { 
    ... 
    itemTpl: new Ext.XTemplate(
     "<div class='result-item'>", 
     "<p class='result-story'>", 
      "{[this.getStoryHtml(values.caption, values.subCaption)]}", 
     "</p>", 
     "<img src='{source}' alt='{caption}' />", 
     "</div>", 
     { 
     // This is a new function on the template created above and can be called 
     // from within the template html 
     getStoryHtml: function(caption, subCaption) { 
      // customize the text to your needs, then return the html to insert 
     } 
     } 
    ), 
    ... 
    } 
}); 

當然，您需要使用CSS對這些項目進行樣式設置，但這應該是簡單的部分。 ;）