CODEWITHSUNDEEP
listextjssencha-touch-2listitem
rc1
rc1

Reputation: 483

Sencha Touch 2: ListItems are blank

My ListItems keep turning up as blanks with no text.

Initially, my items were simply formatted with List object's itemTpl definitions using {field_name}. This worked fine, but of course was limited in functionality.

So I looked at the ST2 documentation guide for DataView (http://docs.sencha.com/touch/2-1/#!/guide/dataview) using dataMap and tried to replicate that. However, for whatever reason, I cannot seem to get the content to actually render. I am getting the expected number of results and the disclosure action does open up the correct/corresponding record. It's just that the items are all blank with no text.

The store loads JSON data through a proxy. The data has many fields, including one called "caption". For now, that's what I want to style and display in the list item. Based on the "caption" content, I may style things differently.

As usual, any help is greatly appreciated. Thanks!

Mohammad.

San Jose, CA

My List object:

Ext.define('qxtapp.view.ResultsList', {
    extend: 'Ext.dataview.List',
    alias: 'widget.resultsList',
    xtype: 'resultsList',
    requires: [
        'qxtapp.view.ResultsListItem',
        'Ext.plugin.ListPaging'
    ],

    config: {
        defaultType: 'resultslistitem',
        loadingText: 'Performing search...<br>This may take up to 1 minute.',
        emptyText: 'No results found.',
        useComponents: true,
        store: 'SearchResults',
        onItemDisclosure: true,
        plugins: [
            {
                xclass: 'Ext.plugin.ListPaging',
                autoPaging: true
            }
        ]
    }
});

My ListItem object:

Ext.define('qxtapp.view.ResultsListItem', {
    extend: 'Ext.dataview.component.ListItem',
    xtype : 'resultslistitem',

    config: {
        captionPanel: true,
        dataMap: {
            getCaptionPanel: {
                setText: 'caption'
            }
        }
    },
    applyCaptionPanel: function(config) {
        return Ext.factory(config, Ext.Panel, this.getCaptionPanel());
    },
    updateCaptionPanel: function(newCaptionPanel, oldCaptionPanel) {
        if(oldCaptionPanel) {
            this.remove(oldCaptionPanel);
        }
        if(newCaptionPanel) {
            this.add(newCaptionPanel);
        }
    }
});

Upvotes: 1

Views: 840

Answers (1)

rc1
rc1

Reputation: 483

Never mind, I realized my own mistake.

Dumb mistake inside the datamap. Since I'm transforming my config into a Panel, and not a Button, my setter should be "setHtml" and not "setText". Works now.

Thanks.

dataMap: {
        getCaptionPanel: {
            setText: 'caption'  //  <---- should have been "setHtml:..."
        }
    }

Upvotes: 1

Related Questions