CRUD & JsonP / Sencha Touch 2

7
votes

What is the proper way of uploading the records via proxy type 'jsonp'? I'm trying to sync() the store, with proxy type "jsonp', but I get error message.

This is the model:

Ext.define("Sencha.model.User", {
    extend:"Ext.data.Model",
    //idProperty:"",


    config:{
        fields:[
            'userID',
            'userName',
            'userEmail'
        ],


        proxy: {
            type: 'jsonp',
                create  : 'http://domainname.com/users.php?action=insert',
                read    : 'http://domainname.com/users.php?action=fetchAll',
                update  : 'http://domainname.com/users.php?action=update',
                destroy : 'http://domainname.com/users.php?action=delete'
            },
            callbackKey: 'callback',
            reader: {
                type: 'json',
                rootProperty: 'Users',
                successProperty: 'success',
                messageProperty: 'message'
            },
            writer: {
                type: 'json',
                writeAllFields: false,
                encode: true
            }
        }
    }
});

The store:

Ext.define("Sencha.store.Users", {
    extend:"Ext.data.Store",
    config:{
        model:"Sencha.model.User",
        remoteFilter:false,
        remoteSort:true,
        autoLoad:true,
        }
    }
});

The store is updated:

Ext.getStore('Users').set('userName', 'Tom');

Now I'd like to update the record in database:

Ext.getStore('Objects').sync();

but I get the error: Uncaught Error: [ERROR][Ext.data.proxy.Server#create] JsonP proxies can only be used to read data.

How can I update the record data - upload it to database via proxy?

1
cordovaproxytouchextjsjsonp

1 Answers

7
votes

You are dealing with CORS (Cross Origin Resource Sharing) By default in all brwsers this is respected and all web servers are by default set to not allow CORS requests. More about CORS here

If you are web developer, and have web server but you need access some external company API from javascript, easiest way is to setup your server to act as web proxy. Below are steps for some servers

(Guru readers, feel free to add here more server configs since I proclamed this as wiki)

Appache using mod_proxy and mod_proxy_http

Open your virtual host file and add those lines (enable mod proxy foirst - further reading here)

ProxyPass /proxy http://domainname.com/
ProxyPassReverse /proxy http://domainname.com/

Nginx

If you are using NGIX for your app configarion add folowing lines

location /proxy {
  proxy_pass        http://domainname.com/;
  proxy_set_header  X-Real-IP  $remote_addr; <-- maybe good to set
}

Further reading on this link.

IIS

If you are using IIS server

the config is a bit more complex then those above but you can find all about it here

For all above examples instead of using limited JSONP capabilities now you can use Ajax and JSON from response as you are serving that API on your server.

Yes you can use it with Phonegap too with little effort

I can say one thing at the biggining. You will either take blue pill or Red pill :) I'm joing but there are two ways. One involes having, again, your own server with configuration as above and second is to dirty your hands with Phonegap native plugin.

First approach (web server owners)

Requires that you have your own web server. You will need above configs for mod_proxy so you can hide real service behind your service and proxy all HTTP requests from your phonegap app. You also have to include CORS (Cross Origin Resource Sharing) headers in response which is returned to phonegap app. Also consider to secure this with authentication since you are exposing content to world. Your phonegap app shold authenticate to your webservice, at least, trough basic HTTP auth over HTTPS.

Follow this steps to complete setup:

Apache

On apache server, first enable modules "headers"

$ a2enmod headers

in virtual host file before or after proxy configuration add following:

ProxyPass /proxy http://domainname.com/
ProxyPassReverse /proxy http://domainname.com/
# CORS allow to all
Header set Access-Control-Allow-Origin *
# Set basic authentication
<Location /proxy>
  AuthType Basic
  AuthName "Restricted Area"
  AuthBasicProvider file
  AuthUserFile /usr/local/apache/passwd/passwords
  Require valid-user # setup user/password in file above using htpasswd
</Location>

In phonegap (Sencha Touch), for ajax request setup username and password like buffer.SlowBuffer();

You'll need first method to pack auth header 

function make_base_auth(user, password) {
  var tok = user + ':' + pass;
  var hash = Base64.encode(tok);
  return "Basic " + hash;
}

Then in your proxy set header like this

headers : { Authorization : make_base_auth("some_username", "some_password") } // I know this is readable by other by you get the point.

IIS 6

To CORS-enable Microsoft IIS6, perform the following steps:

  1. Open Internet Information Service (IIS) Manager
  2. Right click the site you want to enable CORS for and go to Properties
  3. Change to the HTTP Headers tab
  4. In the Custom HTTP headers section, click Add
  5. Enter Access-Control-Allow-Origin as the header name
  6. Enter * as the header value
  7. Click Ok twice

Optional, set basic auth, it's straight forward process.

IIS 7

Also consider to check documentation which is mentioned above on how to set proxy and then amend that web.config file and add folowing

<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

nginx

In location append following

if ($request_method = 'OPTIONS') {

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;

    return 200;
 }

 if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 }

 if ($request_method = 'GET') {

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

 }

Google App engine can be helpfull too

Since it is to long to fit in this box, I will provide link only to one blog where all is exlained properly

The link

...And what about the Second Approach

Well it involves some native coding at least you will need phonegap plugin phonegap-proxy which you can find here But I'd avoid "native" since point of phonegap is to have multi platform app using single code... Oh, if you want to do your "special" plugin writing native code here is good example how to do same thing for facebook API

It is now all up to you to decide which approach you will take ;)