Google Places Auto-complete in extjs4

Question

I am using extjs4 and Spring at server side. I need to integrate Google Places Auto-complete inside one of the extjs4 form. Is there any way this can be done. I am not sure weather we can integrate Google Auto-complete with extjs I have searched but not find anything more specific to my requirement. Please guide me ..... look at my code ...

Ext.define('abce.view.ReportMissing', {
extend : 'Ext.panel.Panel',
alias : 'widget.report_missing',
bodyPadding : 10,
autoScroll : true,
frame : true,

items : [{
    id : 'report_form',
    xtype : 'form',
    frame : true,
    defaultType : 'textfield',

    items : [{
                xtype : 'combobox',
                store : new Ext.data.Store({
                            autoLoad : true,
                            //fields : ['memberName',      'email'],
                            proxy : {
                                type : 'ajax',
                                headers : {
                                    'Content-Type' : 'application/json',
                                    'Accept' : 'application/json'
                                },
                                url : 'http://maps.googleapis.com/maps/api/geocode/json?address=hyd+&sensor=false',
                                remoteSort : true,
                                method : 'GET',
                                reader : {
                                    type : 'json',
                                    successProperty : 'status'
                                }
                            }
                        })
            }]

});

https://developers.google.com/places/documentation/autocomplete

Answer 1

The proxy cannot be used to retrieve data from a URL on a different origin. See the limitations section of Ext.data.proxy.ajax for more information.

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.proxy.Ajax

You will probably need to set up an endpoint on your server to proxy the request to Google if you want to use that API.

Answer 2

Why not instead of use the sencha combobox, use a simple text input as suggest the google api autocomplete documentation. (I first try with a just common textfield but it didn't work) Then declare a panel or component with html as the following example, and then assign the render:

xtype: 'component',
html: '<div> <input id="searchTextField" type="text" size="50"> </div>',
listeners: {
    render: function () {
        var input = document.getElementById('searchTextField');
        autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
        autocomplete.addListener('place_changed', this.fillInAddress);
    },

And result in this:

Answer 3

I was looking for a way to do the same, and I came up writing a custom proxy against the google map javascript library Then I used this custom proxy in a regular combo box

ComboBox:

Ext.create('Ext.form.field.ComboBox', {
    store: {
        fields: [
            {name: 'id'},
            {name: 'description'}
        ],
        proxy: 'google-places'
    },
    queryMode: 'remote',
    displayField: 'description',
    valueField: 'id',
    hideTrigger: true,
    forceSelection: true
});

Custom proxy: (inspired from Ext.data.proxy.Ajax)

Ext.define('com.custom.PlacesProxy', {
    extend: 'Ext.data.proxy.Server',
    alias: 'proxy.google-places',

    constructor: function() {
        this.callSuper();
        this.autocompletePlaceService = new google.maps.places.AutocompleteService();
    },

   buildUrl: function() {
        return 'dummyUrl';
   },

    doRequest: function(operation) {
        var me = this,
            request = me.buildRequest(operation),
            params;

        request.setConfig({
            scope               : me,
            callback            : me.createRequestCallback(request, operation),
            disableCaching      : false // explicitly set it to false, ServerProxy handles caching 
        });

        return me.sendRequest(request);
    },

    sendRequest: function(request) {
        var input = request.getOperation().getParams().query;

        if(input) {
            this.autocompletePlaceService.getPlacePredictions({
                input: input
            }, request.getCallback());
        } else {
            // don't query Google with null/empty input
            request.getCallback().apply(this, [new Array()]);
        }

        this.lastRequest = request;

        return request;
    },

    abort: function(request) {
        // not supported by Google API 
    },

    createRequestCallback: function(request, operation) {
        var me = this;

        return function(places) {
            // handle result from google API
            if (request === me.lastRequest) {
                me.lastRequest = null;
            }
            // turn into a "response" ExtJs understands
            var response = {
                status: 200,
                responseText: places ? Ext.encode(places) : []
            };
            me.processResponse(true, operation, request, response);
         };
    },

    destroy: function() {
        this.lastRequest = null;        
        this.callParent();
    }

});

Note: I wrote this against ExtJs6 but it should basically work alike for ExtJs4.