1

Simple problem but I haven't managed to find a possible solution:

I have a list in Sencha Touch with Items generated through the itemTpl property. Now I want to go through the items (after they were rendered!) in the DOM and Replace their images (using imgCache for on-device-caching of images)

The Painted event of the List doesn't help because it's fired before the Item-DOM is rendered.

EDIT: My current solution is to override the internal updateListItem method of the Ext.dataview.List, call the original updateListItem there and add there my additional functionality. Still looking for a better solution ...

Andrea Casaccia
  • 4,802
  • 4
  • 29
  • 54
ilir aga
  • 133
  • 10

1 Answers1

1

The list associated store's load event is what you're looking for.

[EDIT]

As you point out in the comments the load event is not guaranteed to be thrown after the items have actually been rendered.

I think your approach is correct, but instead of adding in place your functionality, why don't you fire a custom event at the end of the overridden method, passing the list item itself, so that you can listen for that event on the list?

Something like:

updateListItem: function(item, index, info) {

    // function body ...

    me.fireEvent('listitemupdate', [item, index]);

}

That should keep your code a little more clean and reusable.

Andrea Casaccia
  • 4,802
  • 4
  • 29
  • 54
  • The load event is called after the store was loaded... at this moment the DOM of the List is empty. – ilir aga Apr 07 '14 at 13:45
  • I'm going to look into it, but it works for me for similar tasks. Did you try it? Are you sure the list component is not kept in sync *before* firing load on the store? – Andrea Casaccia Apr 07 '14 at 14:03
  • Yeah i tried it... i just added a "alert(document.getElementById('DOM_ID_OF_THE_LIST').innerHTML)" and that retrieves a null reference error. Based on the documentation the store -load- event is called when the store has successfully loaded, not when the DataList was rendered... – ilir aga Apr 07 '14 at 14:10
  • I'll investigate on this, I'm curious why it's working for me and not for you. By the way, I would suggest answering your own question instead of writing your solution as an edit. – Andrea Casaccia Apr 07 '14 at 14:15
  • Okay, thx, I'm also curious... And about the answering: "Users with less than 10 reputation can't answer their own question for 8 hours after asking" ;) – ilir aga Apr 07 '14 at 14:18
  • have you been able to find out something? – ilir aga Apr 09 '14 at 12:19
  • I have studied `Ext.dataview.Dataview`, `Ext.dataview.List` and `Ext.data.Store` source code and I understand that you are right on the `Store` load event being not directly related to the rendering of items. For some reason it was working for me, but we shouldn't rely on that. I am updating my answer with a suggestion for a slightly better approach starting from yours. – Andrea Casaccia Apr 26 '14 at 10:32
  • I'll accept your answer. But I don't get it why there is no regular way of doing this... it's for me a function I need a lot, for example if you have a list with cached images. Caching usually works asynchronous and you have to somehow trigger this loading. – ilir aga Apr 29 '14 at 08:22
  • That is a good question for Sencha's developers. I think it worses performances, that is probably the reason they didn't implement it. – Andrea Casaccia Apr 29 '14 at 09:02
  • That that's maybe the reason. The list is anyway unbearable slow on the android devices... but that's another story. – ilir aga Apr 29 '14 at 13:54