Sencha Touch 2：List和ListItem数据字段

我想知道如何通过组合不同的JSON数据字段来自定义ListItem内容。Sencha Touch 2：List和ListItem数据字段

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

到目前为止，我已经能够使用dataMap并使用自定义类来包装每个文本和样式。但是，我能够添加内容的唯一方法是使用应用程序/更新功能顺序执行。因此，我的ListItems只是它们自己的行中的{caption}，{subCaption}，{source}。

这里就是我想每个列表项的样子：

结合{标题}和{subCaption}文字和创建一个简短的故事，作为面板添加此到列表项
渲染{源}在停靠在步骤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; 
    } 
});

来源

2013-03-07 Mohammad

我不知道为什么你需要去克服这些困难，为什么在一个简单的列表中未使用的项目模板？

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对这些项目进行样式设置，但这应该是简单的部分。 ;）

来源

2013-03-08 16:28:27 jakerella

Sencha Touch 2：List和ListItem数据字段

回答

相关问题