iOS with Phonegap with Sencha Touch 2 PR2 problems

**jameshenderson** · 22 Nov 2011 3:01 PM

REQUIRED INFORMATION

Ext version tested:

Sencha Touch 2 PR2

Browser versions tested against:

Phonegap v1.x & iOS v4x - iPad and iPhone

DOCTYPE tested against:

<!DOCTYPE html>

Description:

Many of the supplied examples are not working (the one I really want fixed is the tabs2 example) when you use them with an iOS app using Phonegap v1.x. They work fine in Chrome and Android but not as an xCode built app - either the buttons don't work, or there is just a blank canvas. Strangely, the iPad will often not show a blank canvas (when using exactly the same code) but the buttons never work

Steps to reproduce the problem:

Create a new Phonegap project in xCode, then copy the contents of a PR2 example (in this case example/tabs), then add the sencha-touch-all.js and sencha-touch.css files into the same directory, then add the www folder with references into the xCode project, then make the changes to the index.html file so that it can find the required files sencha js and css (shown below)

The result that was expected:

The supplied examples in PR2 work fine in Chrome and Android but always fail on iOS when built as native iOS app

The result that occurs instead:

When trying out some of the examples supplied with PR2, the buttons don't work, or the screen is just blank (only with phonegap as a native iOS app, this code is fine on Chrome and Android). Strangely, iPad has more success, although the buttons still don't work

Test Case:

Code:

<!DOCTYPE html>
<!-- this is just an exact copy of the tabs example, except all in one place --><html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Tabs</title>
    <link rel="stylesheet" href="sencha-touch.css" type="text/css">
    <script type="text/javascript" src="sencha-touch-all.js"></script>
    <script type="text/javascript">
        Ext.require([
                     'Ext.tab.Panel'
                     ]);
        
        Ext.setup({
                  icon: 'icon.png',
                  glossOnIcon: false,
                  tabletStartupScreen: 'tablet_startup.png',
                  phoneStartupScreen: 'phone_startup.png',
                  onReady: function() {
                  Ext.create('Ext.tab.Panel', {
                             fullscreen: true,
                             type: 'dark',
                             sortable: true,
                             items: [
                                     {
                                     title: 'Tab 1',
                                     html: '1',
                                     cls: 'card1',
                                     iconCls: 'bookmarks'
                                     },
                                     {
                                     title: 'Tab 2',
                                     html: '2',
                                     cls: 'card2',
                                     iconCls: 'download'
                                     },
                                     {
                                     title: 'Tab 3',
                                     html: '3',
                                     cls: 'card3',
                                     iconCls: 'favorites'
                                     }
                                     ]
                             });
                  }
                  });


    </script>
    <style>
        .card1,
        .card2,
        .card3 {
            background-color: #376daa;
            text-align: center;
            color: #204167;
            text-shadow: #3F80CA 0 1px 0;
            font-size: 72px;
            padding-top: 100px;
        }
    </style>
</head>
<body></body>
</html>

HELPFUL INFORMATION

Operating System:

iOS 4x iPhone - tested with handsets and simulators

**olouvignes** · 23 Nov 2011 3:18 PM

You could try to apply this patch see if it helps. Animations seems to be still broken in PR2 for IOS <= 4 devices (not sure since i dropped PR2 for PR1 atm).

https://github.com/mgcrea/sencha-tou...4ccb3ca8fa1a94

Hope it helps.

**Jamie Avins** · 28 Nov 2011 9:50 AM

Thank you for the report.

iOS with Phonegap with Sencha Touch 2 PR2 problems

Thread Tools

Search Thread

Display

iOS with Phonegap with Sencha Touch 2 PR2 problems

iOS with Phonegap with Sencha Touch 2 PR2 problems