Touch 2 + PhoneGap + iOS Issue: Can't get views to pop or push

**pbartal** · 19 Jan 2012 2:52 PM

Hi All,

I am trying to run a basic example app ("navigationview") in XCode + PhoneGap + Touch2. The app loads up fine and everything looks good until I try to pop or push a different view. I ran into the same behavior when trying to run the KitchenSink example from XCode.

The problem only happens when running from XCode in the Simulator (Same for iPhone and iPad), but the exact same code works just fine from Chrome on my local. So it seems that all code is there.

Env: Snow Leopard + XCode 3.2.6 + Device Target iPad/iPhone + iOS4.2

Any ideas?

Code:

<!doctype html><html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Navigation View</title>
        <script src="phonegap-1.3.0.js"></script>
        
        <!-- Sencha Touch -->
        <link rel="stylesheet" href="touch2/resources/css/sencha-touch.css"/>
        <script src="touch2/sencha-touch-all.js"></script>
        
        <!-- Application -->
        <script src="index.js"></script>
        
        <script type="text/javascript">
            document.addEventListener("deviceready", function () {
                //alert('Our first PhoneGap app');
            }, false);
        </script>
    </head>
    
    <body></body>
</html>

Code:

/** * There are two main parts of this example:
 *
 * **Ext.navigation.View**
 * This component is simply a container with a layout, which handles pushing and popping items/views
 * at any time. It will automatically animate between those views, including the back button (if it is
 * visibly) and a user defined title (if defined in your item).
 * 
 * **Ext.ActionSheet**
 * This is simply used to show off some additional functionality of the navigation view component.
 */
Ext.setup({
    requires: [
        'Ext.navigation.View',
        'Ext.ActionSheet',
        'Ext.Button',
        'Ext.Toolbar'
    ],
    onReady: function() {
        /**
         * Create an instance of Ext.navigation.View, which is fullscreen so it is inserted into Ext.Viewport
         */
        var view = Ext.create('Ext.navigation.View', {
            fullscreen: true,


            //true means the back button text will always be 'back'
            // useTitleForBackButtonText: true,


            items: [
                //bottom toolbar containing the settings button
                {
                    docked: 'bottom',
                    xtype: 'toolbar',
                    ui :'light',
                    items: [
                        { xtype: 'spacer' },
                        {
                            iconMask: true,
                            iconCls: 'settings',
                            handler: function() {
                                //check if we can pop a view in the navigation view, if not, disable the pop button
                                //on the action sheet
                                var popButton = optionsSheet.down('#pop');
                                popButton.setDisabled(!view.canPop());


                                //show the option sheet
                                optionsSheet.show();
                            }
                        }
                    ]
                },


                //first item, which is visibile initially
                {
                    title: 'Ext.navigation.View Example',
                    layout: 'vbox',
                    padding: 10,
                    items: [
                        {
                            xtype: 'button',
                            text: 'Push another view!',
                            handler: function() {
                                //we already have other items in this navigation view, so we can simply use an index if we want
                                view.push(1);
                            }
                        }
                    ]
                },


                //Second item. Show when the button above is pressed.
                {
                    title: 'Second',
                    layout: 'vbox',
                    padding: 10,
                    items: [
                        {
                            xtype: 'button',
                            text: 'Another?',
                            handler: function() {
                                view.push(2);
                            }
                        }
                    ]
                },


                //Third item. Show when the button above is pressed.
                {
                    title: 'Third',
                    layout: 'vbox',
                    padding: 10,
                    items: [
                        {
                            xtype: 'button',
                            text: 'Push a new view',
                            handler: function() {
                                view.push({
                                    title: 'New view',
                                    items: [
                                        {
                                            xtype: 'button',
                                            text: 'Pop this view',
                                            handler: function() {
                                                view.pop();
                                            }
                                        }
                                    ]
                                });
                            }
                        }
                    ]
                }
            ]
        });


        /**
         * A ActionSheet which is used to display various options for the Navigation View
         */
        var optionsSheet = Ext.create('Ext.ActionSheet', {
            items: [
                {
                    xtype: 'button',
                    text: 'Add a random view',
                    handler: function() {
                        //use the push method of the navigation view to create a new view
                        view.push({
                            title: Date.now().toString(),
                            padding: 10,
                            html: 'This is a random view.'
                        });


                        //hide the sheet
                        optionsSheet.hide();
                    }
                },
                {
                    xtype: 'button',
                    text: 'Toggle back button text',
                    handler: function() {
                        //simply call the setter for the useTitleForBackButtonText configuration
                        view.setUseTitleForBackButtonText(!view.getUseTitleForBackButtonText());


                        //hide the sheet
                        optionsSheet.hide();
                    }
                },
                {
                    xtype: 'button',
                    text: 'Pop the current view',
                    itemId: 'pop',
                    handler: function() {
                        //call the pop method in the navigation view
                        view.pop();


                        //hide the sheet
                        optionsSheet.hide();
                    }
                },
                {
                    text: 'Cancel',
                    ui: 'decline',
                    handler: function() {
                        //hide the sheet
                        optionsSheet.hide();
                    }
                }
            ]
        });
    }
});

benben

Maybe this is related to that bug ?
http://www.sencha.com/forum/archive/...t-151035.html?

The fix proposed in that post works. The bug appears indeed for iOS 4.x , iOS 5 is fine.

**mitchellsimoens** · 20 Jan 2012 6:53 AM

I cannot confirm but I have been hearing of issues with iOS 4 and phonegap

**pbartal** · 20 Jan 2012 8:05 AM

How about iOS5? Have you heard anything on that? I was hoping to postpone my upgrade to Lion for a while.

Where can I report a bug about this issues I am seeing on iOS4?

**benben** · 20 Jan 2012 9:30 AM

Maybe this is related to that bug ?
http://www.sencha.com/forum/archive/...t-151035.html?

The fix proposed in that post works. The bug appears indeed for iOS 4.x , iOS 5 is fine.

**pbartal** · 20 Jan 2012 9:40 AM

Worked! Applied the patch and it now works as it should. Thank you. For reference from the other thread, this is the patch for sencha-touch-all-debug-w-comments.js:

Code:

document.body.appendChild(iframe);
iframeDocument = iframe.contentDocument;

// START PATCH

// Fix for iOS < 5.0
if(Ext.os.is.iOS && !Ext.os.is.iOS5) {
iframeDocument.open();
iframeDocument.writeln('</body>');
iframeDocument.close();
}

// END PATCH

this.testElement = testElement = iframeDocument.createElement('div');
testElement.style.position = 'absolute !important';

Touch 2 + PhoneGap + iOS Issue: Can't get views to pop or push

Thread Tools

Search Thread

Display

Answered: Touch 2 + PhoneGap + iOS Issue: Can't get views to pop or push

Answered: Touch 2 + PhoneGap + iOS Issue: Can't get views to pop or push

Tags for this Thread