Dynamically change list item's icon

[reco123]

So I have a List inside a view, it use itemTpl to create customized item template.

    this.list =  Ext.create('Ext.List', {      xtype: 'gameList',
      title: 'Game List',
      id: 'gameList',
      ui: 'round',
      flex: 1,
      width: 300,
      store: 'Games',
      cls: 'gameList',
      itemTpl: Ext.create('Ext.XTemplate',
       '<div class="game">',
       '<img class="gameuserpic" src="{userPic}" />',
       '<img class="gamemoveimg" src="resources/images/{action}.png"/>',
       '<p class="info">{userName}</p>',
       '<p class="move">{move}</p>',
       '</div>'),
      //end itemTPl
    });

But i have a problem now. When I click one of the item, i want to change the picture inside that tpl which is

'<img class="gamemoveimg" src="resources/images/{action}.png"/>',

the {action} is from the store. so i just directly change it by using

clickGame: function(view, index, item, e) {e.getData().action = 'waiting';}

but I have to call refresh function to get the list updated!! now the problem is , when you call Ext.getCmp('gameList').refresh() , the list suddenly goes to the top, it lost the original position!!
How can I refresh the list without changing the current position ?

[bricemason]

The itemtap event on Ext.dataview.List provides the record as part of its argument list. You can handle it like this:

listeners: {
   itemtap: function(dataview, index, targetEl, record) {
      record.set('action', 'waiting');
   }
}

and the item will update in place.

Brice