Results 1 to 3 of 3

Thread: List rendering race condition

  1. #1
    Sencha Premium Member
    Join Date
    Dec 2010

    Default List rendering race condition

    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,

  2. #2
    Sencha Premium Member
    Join Date
    Dec 2010

    Default (and Phonegap?)

    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 " + + ' is ' + el.innerHTML);

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


  3. #3
    Sencha Premium Member
    Join Date
    Dec 2010

    Default (kinda) solution - innerHTML is broken on mobile safari

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

Similar Threads

  1. How to be sure rendering is complete? (onRender race condition)
    By patniemeyer in forum Ext GWT: Discussion
    Replies: 5
    Last Post: 13 Nov 2010, 11:57 AM
  2. Resolve Race Condition
    By Tuckerific in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 30 Mar 2010, 11:12 PM
  3. Race condition in Ext.Log?
    By mankz in forum Community Discussion
    Replies: 5
    Last Post: 30 Dec 2008, 12:46 PM
  4. Weird race condition (I think) due to a-jax
    By frew in forum Sencha Ext JS Q&A
    Replies: 14
    Last Post: 27 Oct 2008, 5:35 PM
  5. Timing issue - Race condition with rendering components
    By noah977 in forum Sencha Ext JS Q&A
    Replies: 6
    Last Post: 10 Apr 2008, 5:06 AM

Posting Permissions

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