Hello all,

I wanted to know how to customize the ListItem content by combining different JSON data fields..

I have three JSON fields: {caption},{subCaption},{source}.

So far, I have been able to use dataMap and use custom classes to wrap additional text and styling around each. However, the only way I have been able to add content is to do so sequentially with the use of apply/update functions. As a result, my ListItems are simply {caption},{subCaption},{source} in their own lines.

Here's how I would like each ListItem to look like:

1. Combine {caption} and {subCaption} text and create a short story and add this as a panel to the ListItem
2. Render {source} in a small panel docked at the bottom right of the panel created in step 1.

How can I do the above? The distilled question would be: How can I access and combine the data from different JSON fields and render into ListItem?

My current code for ListItem is copied below for reference.

As always, any help is greatly appreciated! Thanks!

Mohammad
San Jose, CA

Code:
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;
    }
});