Sencha 2.0 Native App with Ajax Request

Question

I'm trying to write a native android application using Sencha (no Phonegap) that is able to contact a server with get/post requests. I've gotten the code to the point where it works in a browser, but when I package the app into an .apk and run it on an emulator (I've updated its hosts file to include my test server's ip), the ajax request fails with status code 0.

I'm not sure if this is still a cross-domain thing? I've heard that using jsonp instead will work, but since jsonp doesn't support post requests, would it be appropriate to use jsonp even for requests that would be updating/adding to a database? The other suggestion I heard was to add PhoneGap. Are these really the only options?

Ext.Ajax.request({
        url: App.config.Config.getRemoteHost() + '/users/login.json',
        method: 'POST',
        useDefaultXhrHeader : false,
        params: {
            'data[User][email]': values.email,
            'data[User][password]': values.password
        },
        success: function(response) {
            loginForm.setMasked(false);
            var response = Ext.util.JSON.decode(response.responseText)
            if(response.success) {

                //Save session for later.
                this.session = response.session;
                localStorage.setItem('session', this.session);

                //Display main view.
                Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
                Ext.Viewport.add(Ext.create('App.view.Main'));
                Ext.Msg.alert('Logged In', 'Login successful.');
            } else {
                Ext.Msg.alert('Login Failed', response.error);
            }
        },
        failure: function(response) {
            console.log(response.status);  //This is 0 on the native app.
            loginForm.setMasked(false);
            Ext.Msg.alert('Error', 'There was a problem logging in.');
        }
    });

score 0 · Answer 1 · answered Apr 22 '14 at 23:14

I've found another option is instead of using an ajax post, I can just directly submit a form as post data. This method appears to work even in the packaged app.

 loginForm.submit({
        method: 'POST',
        scope: this,
        url: App.config.Config.getRemoteHost() + '/users/login.json',

         // Upon success, go to TabPanel
        success: function(form, response) {
            loginForm.setMasked(false);

            //Save session for later.
            this.session = response.session;
            localStorage.setItem('session', this.session);

            //Display main view.
            Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
            Ext.Viewport.add(Ext.create('App.view.Main'));
            Ext.Msg.alert('Logged In', 'Login successful.');
        },

         // Upon failure, show an error message
        failure: function(form, response) {
            console.log(response);
            loginForm.setMasked(false);
            Ext.Msg.alert('Login Failed', response.error);
        }
    });

Sencha 2.0 Native App with Ajax Request

1 Answers1