Results 1 to 6 of 6

Thread: NavigationView demo breaks while loading inside native Facebook app on iOS

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-2252 in a recent build.
  1. #1
    Touch Premium Member
    Join Date
    May 2009
    Vote Rating

    Default NavigationView demo breaks while loading inside native Facebook app on iOS


    Ext version tested:

    • Sencha Touch RC1

    Browser versions tested against:

    • iOS 5, Facebook Native application (latest version)

    DOCTYPE tested against:

    • n/a


    • The NavigationView demo breaks due to an "Undefined is not an object" error, when rendered inside the Facebook native application in iOS, although it works fine in ordinary Mobile Safari, Chrome, and all other browsers I have tried. While I assume the Facebook native app uses a Safari instance under the covers, it does appear to behave differently. This could impact any Sencha Touch app that gets clicked on from inside the Facebook app.

    Steps to reproduce the problem:

    • Log into Facebook and post a link to the NavigationView demo ( somewhere on Facebook, such as sharing it in status update or posting it to a page.
    • Launch the Facebook native app on iOS, such as an iPhone
    • Click the link you posted

    The result that was expected:

    • NavigationView demo behaves as expected; you click a person's name and can see the map of their location

    The result that occurs instead:

    • Upon clicking a name, nothing happens. A JS error "Undefined is not an object" is being thrown silently.

    Test Case:

    NavigationView demo repros this as-is, but I added a bit of debugging info below:

    <!DOCTYPE html>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Address Book</title>
            <!-- Google Maps API -->
            <script type="text/javascript" src=""></script>
            <!-- Sencha Touch -->
            <script type="text/javascript" src="../../builds/sencha-touch-all.js"></script>
            <!-- Application -->
            <link rel="stylesheet" href="resources/css/example.css" type="text/css" />
            <script type="text/javascript">
                // This is the index.html from the RC1 NavigationView demo.  
                // I added this handler so you can see an error is being thrown
                function genericOnError(handler) {
                    // Chrome, Firefox and IE implement onerror,
                    // and it will one day be standardized...
                    window.onerror = function (message, url, line) {
                        handler("Error std: " + message + " " + url + ":" + line);
                        // Note, don't return a value since Chrome/Firefox don't agree
                        // on true/false meaning. A no-return triggers the correct
                        // behavior in both (print error to console).
                    // Safari 5 and Opera 11 doesn't implement onerror,
                    // so intercept the undocumented Error function
                    if (RegExp("Safari|Opera").test(navigator.userAgent)
                      && !RegExp("Chrome").test(navigator.userAgent)) {
                        var originalError = window.Error;
                        window.Error = function () {
                            if (arguments.length > 0) handler("Error: " + arguments[0]);
                            return originalError.apply(this, arguments);
                genericOnError(function (m) { alert(m); });    
                // This was just added to prevent the Facebook browser from caching app.js, made debugging easier
                document.writeln('<sc' + 'ript type="text/javascript" src="app.js?' + Math.random(10000) + '"></scr' + 'ipt>');


    Screenshot or Video:

    • n/a

    See this URL for live test case: This link has the onerror code shown above:

    I posted it to the Wall of a test Fan Page so you can see it:!/pages/Donkey-Jack/154011037948075

    Debugging already done:

    • I think the problem is in the NavigationView.push() method. In my own application I have intermittently seen the "Undefined is not an object" error get thrown in mobile Safari if I have the debugging output turned on for my iPhone. I haven't tested other RC1 demos; perhaps this is more general and related to the Ext.Loader() instead.

    Possible fix:

    • not provided

    Additional CSS used:

    • only default ext-all.css

    Operating System:

    • iOS 5, native Facebook app, latest version

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    We can take a look at it to see if there is anything we can do.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

  3. #3
    Touch Premium Member
    Join Date
    May 2009
    Vote Rating

    Default More details regarding other demos

    Here are some more details I found out while testing:
    1. The Ext.Loader doesn't look like the culprit. If I disable Ext.Loader() and concatenate all the NavigationView JS into a single file and load that, I get the same error.
    2. The KitchenSink and standalone NestedList demos break as well when opened inside Facebook, probably because they use NavigationView.
    3. Interestingly, the List demo breaks, but in a different way, if you link to it: After you click the Disclosure button, the dialog comes up, but when you OK out of it, the screen remains masked (it does not remain masked in ordinary mobile Safari). This points to a larger issue (perhaps related to eventing?) than just the NavigationView.push(). If you'd like I can open a separate bug for this.

    Also, all the above info applies to the iPad Facebook app as well as iPhone.
    Last edited by rolfdaddy; 25 Feb 2012 at 10:19 AM. Reason: added iPad repro as well

  4. #4
    Touch Premium Member
    Join Date
    May 2009
    Vote Rating

    Default The User Agent was not reporting as Safari!

    The problem, after much painful debugging, is that the user agent for the browser inside the Facebook native app doesn't match the string expected for mobile Safari.

    In particular on my iPad, the user agent comes back as:

    "Mozilla/5.0 (iPad; U; CPU iPhone OS 4_3_3 like Mac OS X; en_US) AppleWebKit (KHTML, like Gecko) Mobile [FBAN/FBForIPhone;FBAV/4.1;FBBV/4100.0;FBDV/iPad2,1;FBMD/iPad;FBSN/iPhone OS;FBSV/4.3.3;FBSS/1; FBCR/;FBID/tablet;FBLC/en_US;FBSF/1.0]"

    While mobile Safari is:

    "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"

    My iPhone had a similar [FB...] string to the iPad, but was not exactly the same (version numbers were different as may be expected).

    I was able to temporarily hack in this user agent in the constructor for Ext.env.Browser as:

            if (userAgent.match(/FB/))
                userAgent = "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5";
            var statics = this.statics(),
                browserMatch = userAgent.match(new RegExp('((?:' + Ext.Object.getValues(statics.browserPrefixes).join(')|(?:') + '))([\\w\\._]+)')),
                engineMatch = userAgent.match(new RegExp('((?:' + Ext.Object.getValues(statics.enginePrefixes).join(')|(?:') + '))([\\w\\._]+)')),
                browserNames = statics.browserNames,
                browserName = browserNames.other,
                engineNames = statics.engineNames,
                engineName = engineNames.other,
                browserVersion = '',
                engineVersion = '',
                isWebView = false,
                is, i, name;
    Please try to get a fix for this in for the final 2.0 release.

  5. #5
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Vote Rating


    Damn. You, sir, are a legend.

    Looking into this now. It'll be fixed for 2.0.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  6. #6
    Sencha User
    Join Date
    Jun 2012
    Vote Rating

    Default The kitchensink demo still doesn't work from within Facebook Native app

    Does anyone know if there's a workaround to get a Sencha web app url to pull up in Safari instead of within the Facebook Native app's frames?

Tags for this Thread

Posting Permissions

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