Sencha Touch 2.1 native (android) app not getting

Question

I created my first Sencha touch 2 app by watching this video (http://youtu.be/5F7Gx0-W-M4) and it has a store page structured like this:

Ext.define('FirstApp.store.Places',{
    extend:'Ext.data.Store',

    config:{

        autoLoad:true,
        model:'FirstApp.model.Place',
        proxy:{
            type:'ajax',
            url:'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyCFWZSKDslql5GZR0OJlVcgoQJP1UKgZ5U',
            reader:{
                type:'json',
                rootProperty:'results'
            }
        }
    }
})

The after-build (after running "sencha app build native") package work very well on my MAC (all browsers) but the generated app (i am running it on my nexus phone) works but doesn't collect any data from the google maps json. Any help would be appreciated

Answer 1

The example you are referring is using google map's place search API. You can not use this API when you build the app for mobile phone with proxy set to ajax . Basically, you can not use any resource that is outside your domain. Like if your site is at yourdomain.com and there is someotherdomain.com, then you can't make ajax request to this someotherdomain.com from yourdomain.com unless that domain allows you to. In this case, your mobile app is not having any domain. You are just loading a page inside webview.

The reason is, ajax will not be able to load cross-origin resources. App build works on browsers because I believe you're using chrome with --disable-web-security flag. To work with CORS you need to use JsonP proxy. It's the only way if you're packaging for mobile app. If in a case, you own the server ( not in this context though ) then you can allow CORS by setting appropriate headers like

Access-Control-Allow-Origin: *

or

Access-Control-Allow-Origin: http://yourdomain.com/resource

Try setting proxy to JsonP .