1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
    pbartal is on a distinguished road

      0  

    Question 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


    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();
                        }
                    }
                ]
            });
        }
    });

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,203
    Answers
    3515
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I cannot confirm but I have been hearing of issues with iOS 4 and phonegap
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
    pbartal is on a distinguished road

      0  

    Default


    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?

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    36
    Answers
    1
    Vote Rating
    0
    benben is on a distinguished road

      0  

    Default


    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.

  6. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
    pbartal is on a distinguished road

      0  

    Thumbs up


    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';

Thread Participants: 2

Tags for this Thread