View Full Version : List rendering race condition

30 Jan 2011, 1:08 PM
I've encountered a strange problem that I hope the forum might be able to help with.

I have a panel with 2 cards, each with its own store-backed List object. When the user clicks on the list of the first card, we set the filter on the store of the second card and call setActiveCard() to switch to the 2nd card. The flow works well in the simulator and in desktop browser.

On the actual device (iPhone), there seems to be some kind of race condition going on, where the HTML for the 2nd list is not displaying at all. I traced the flow as follows:

- DataView calls refresh()
- refresh() calls this.tpl.overwrite()
this.tpl.overwrite(el, this.collectData(records, 0));
- overwrite() calls applyTemplate:
el.innerHTML = this.applyTemplate(values);

The really strange thing is, I've verified that applyTemplate is returning the correct HTML. But when I print out the value of el.innerHTML (immediately following applyTemplate) it is empty.

Is the browser reinitializing the innerHTML of the element asynchronously from the application flow somehow? How can I detect if this is the case?

Anyone seen this before?

Thanks in advance,

10 Feb 2011, 8:00 AM
Bumping this thread one time, with one additional twist -- Currently, the app only seems to be exhibiting this condition when run under PhoneGap. It runs fine on the device in Safari.

I'm about 80% sure that when I first posted this thread, the problem was occurring in Safari. But I'm not positive.

Has anyone seen this before, before I roll up my sleeves and try to isolate further?

[EDIT: to be clear, here's how I'm verifying this symptom:
in Ext.template, I've replaced

el.innerHTML = this.applyTemplate(values);


var newhtml = this.applyTemplate(values);
el.innerHTML = newhtml;
console.log('Template overwrite new HTML is ' + newhtml + " and html for element " + el.id + ' is ' + el.innerHTML);

The output is showing newhtml is "correct", while el.innerHTML is returning an empty string.
[End Edit]


16 Feb 2011, 9:58 AM
So it turns out that this is an artifact of a known issue with Mobile Safari. The best reference I found to it was at http://blog.johnmckerrell.com/2007/03/07/problems-with-safari-and-innerhtml/ . A visit to the Apple Dev Forums shows that it is still a problem for other developers as well.

The solution in the referenced post doesn't seem to work for Sencha, presumably due to the layout depending on the contents of innerHTML being rendered immediately. So instead, I check the contents in the refresh function; if the result of tpl.overwrite() is empty, then I schedule another call to refresh in 100ms. It's only slightly less ugly than the recursive solution of the referenced post, but it does seem to work.

If I had more time, I would try to investigate exactly what is triggering this bug, but for now, I'm using my workaround.

Hope this helps anyone who encounters something similar.