1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    43
    Answers
    3
    Vote Rating
    0
    minamu1 is on a distinguished road

      0  

    Default Answered: List problem: ListItems are blank

    Answered: List problem: ListItems are blank


    Hello,

    I had a question about customizing the List items. 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.

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

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

  2. 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.

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

  3. #2
    Sencha User
    Join Date
    Jun 2009
    Posts
    43
    Answers
    3
    Vote Rating
    0
    minamu1 is on a distinguished road

      0  

    Default


    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.

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

Tags for this Thread