0

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

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

到目前为止，我已经能够使用 dataMap 并使用自定义类来包装额外的文本和样式。但是，我能够添加内容的唯一方法是使用应用/更新函数按顺序添加内容。结果，我的 ListItems 在他们自己的行中只是 {caption}、{subCaption}、{source}。

这是我希望每个 ListItem 的样子：

  1. 结合 {caption} 和 {subCaption} 文本并创建一个短篇故事并将其作为面板添加到 ListItem
  2. 在步骤 1 中创建的面板右下方停靠的小面板中渲染 {source}。

我该怎么做以上？提炼出来的问题是：如何访问和组合来自不同 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;
    }
});
4

1 回答 1

2

我不确定你为什么需要经历所有这些麻烦，为什么不在简单列表中使用项目模板？

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-08T16:28:27.327 回答