Question

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

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

到目前为止，我已经能够使用dataMap并使用自定义类来包装每个文本和样式。但是，我能够添加内容的唯一方法是使用apply / update函数按顺序执行此操作。因此，我的ListItems只是{caption}，{subCaption}，{source}在他们自己的行中。

以下是我希望每个ListItem看起来像：

合并{caption}和{subCaption}文字并创建一个简短的故事并将其作为面板添加到ListItem
在停靠在步骤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;
    }
});

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设置这些项目的样式，但这应该是容易的部分。 ;）

Sencha Touch 2：List和ListItem数据字段

1 个答案: