Sencha Touch not initializing

Question

MY sencha touch application is working fine in all browsers, however when I save the url to the iPad home screen. It will not load and only shows a blank screen. I get no JS errors and nothing comes through the log when debugging. Heres a sample of the app:

script type="text/javascript">
    var rootPanel;
    if (navigator.userAgent.match(/iPad/i)) {
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=980');
    }
    Ext.application({
        launch: function () {



            var contactForm = Ext.create('Ext.form.FormPanel', {
                standardSubmit: true,
                fullscreen: true,
                items: [{
                    xtype: 'titlebar',
                    title: 'My App',
                    docked: 'top'
                }, {
                    xtype: 'fieldset',
                    items: [{
                        xtype: 'textfield',
                        name: 'LoginName',
                        label: 'Login Name:'
                    }, {
                        xtype: 'passwordfield',
                        name: 'Password',
                        label: 'Password:'
                    },
                    {
                        xtype: 'hiddenfield',
                        name: 'ReturnUrl',
                        value: '/returnUser.html'
                    }] // items
                }, {
                    xtype: 'toolbar',
                    layout: {
                        pack: 'center'
                    }, // layout
                    ui: 'plain',
                    items: [{
                        xtype: 'button',
                        text: 'Reset',
                        ui: 'decline',
                        handler: function (btn, evt) {
                            Ext.Msg.confirm('', 'Are you sure you want to reset this form?', function (btn) {
                                if (btn === 'yes') {
                                    contactForm.setValues({
                                        LoginName: '',
                                        Password: ''
                                    }); // contactForm()
                                } // switch
                            }); // confirm()
                        }
                    }, {
                        xtype: 'button',
                        text: 'Submit',
                        ui: 'confirm',
                        handler: function (btn, evt) {
                            var values = contactForm.getValues();

                            contactForm.submit({
                                url: 'Login',
                                method: 'POST',
                                waitTitle: 'Connecting',
                                waitMsg: 'Sending data...',
                                success: function (form, result) {
                                    Ext.Msg.alert('Login succeeded!', result.response.reason);
                                },
                                failure: function (form, result) {
                                    Ext.Msg.alert('Login Failed!', result.response.reason);
                                }
                            });

                        } // handler
                    }] // items (toolbar)
                }] // items (formpanel)
            }); // create()
        } // launch
    }); // application()


    $(document).ready(function () {

    });

I put an alert in the launch method of Ext.Application but it does not show. When I put it an alert in the document.ready function it does show. I should also note it DOES work on the ipad browser, just not when launched from the icon on the homescreen.

Answer 1

i faced a similar issue in android actually in my case the problem was because of Ext.Loader not enabled I see you have not included it either. Include this script before Ext.application & see if it works

Ext.Loader.setConfig({
    enabled:true
});

Ext.application({...});