Left icons like in iOS 7 Sencha Touch's both disclosure and non-disclosure lists

Question

What is the best way to have left icons rendered for list items in both lists with disclosure and lists without disclosure? I need the icon to read the image src from one of model's properties.

I currently have a simple tpl that does: {xyzmodelproperty}

Any help is much appreciated! Thanks!

Answer 1

You can add a more complex template to customize the look of your list item like you want. In that template you have access to all properties in the store.

extend : 'Ext.List',
xtype : 'list',
config : {
    title : 'List',
    layout : 'fit',
    grouped: true,              
    store : 'MyStore',
    itemTpl : '<table style="width:100%"><tr><td style="width:30px">{icon}</td>'
              + '<td>{content}</td></tr></table>'
}