Sencha Touch 2 add icons to nestedlist

Question

I am trying to add images to a nested list using the getItemTextTpl method of NestedList. Can you please take a look at the following code and let me know how to fix it? This was developed using Sencha Architect. Thanks for your help.

Ext.define('myapp.view.ListContainer', {
    extend: 'Ext.Container',
    alias: 'widget.listcontainer',

    config: {
        layout: {
            type: 'fit'
        },
        tpl: [
            ''
        ],
        items: [
            {
                xtype: 'nestedlist',
                id: 'myList',
                itemId: 'mynestedlist4',
                detailCard: {
                    xtype: 'mytabs'
                },
                store: 'myStore',
                toolbar: {
                    xtype: 'titlebar',
                    docked: 'bottom',
                    ui: 'dark'
                }
            }
        ],
        listeners: [
            {
                fn: 'getItemTextTpl',
                event: 'getItemTextTpl',
                delegate: '#myList'
            }
        ]
    },

    getItemTextTpl: function(node) {
        return '<img class="eventIcon" src="http://localhost/images/test.png">';

    }

});

Answer 1

Ext.define('myapp.view.myList', {
    extend: 'Ext.dataview.NestedList',
    alias: 'widget.mynestedlist',

    config: {
        id: 'myList',
        detailCard: {
            xtype: 'mytabs'
        },
        displayField: 'text',
        store: 'myStore'
    },

    getItemTextTpl: function(recordnode) {
        return '<img class="eventIcon" src="http://localhost/images/test.png">'; 
    }

});

Answer 2

Just a quick tip. FontAwesome is a great way to add beautiful icons easily to you application.