Results 1 to 2 of 2

Thread: Dynamically change list item's icon

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Vote Rating

    Default Answered: Dynamically change list item's icon

    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>',
          //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 ?

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


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts