Sencha Touch 2: поля данных List и ListItem

Я хотел знать, как настроить содержимое ListItem, комбинируя разные поля данных JSON.

У меня есть три поля JSON: {caption}, {subCaption}, {source}.

До сих пор я мог использовать dataMap и использовать пользовательские классы, чтобы обернуть дополнительный текст и стиль вокруг каждого. Однако единственный способ, которым я смог добавить контент, — это сделать это последовательно с использованием функций применения/обновления. В результате мои ListItems просто {caption}, {subCaption}, {source} в своих собственных строках.

Вот как я хотел бы, чтобы каждый ListItem выглядел так:

  1. Объедините текст {caption} и {subCaption}, создайте короткий рассказ и добавьте его как панель в ListItem.
  2. Визуализируйте {source} на небольшой панели, закрепленной в правом нижнем углу панели, созданной на шаге 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;
    }
});

list listitem sencha-touch-2
person rc1    schedule 07.03.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я не уверен, зачем вам нужно проходить через все эти проблемы, почему бы не использовать шаблон элемента в простом списке?

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, но это должно быть легкой частью. ;)

person Jordan Kasper    schedule 08.03.2013