Google Maps API v3: Can I create Place Autocomplete in combobox using ExtJS 4.2?

Question

I have search this over on google, but no luck finding the solution. I have read this documentation but it just using pure javascript.

I have read this from older post created by @Ram, but the answer didn't solve my problem, because I think maybe there's other ideas more tricky way that I don't reach it now from my current knowledge.

I have tried using ajax from php to retrieve predictions and to throw away that limitation, this's my php code in c_places.php :

function getPlaces(){
        $address = urlencode($this->input->post('place'));
        $request = file_get_contents("http://maps.google.com/maps/api/geocode/json?address=" . $address . "&sensor=false");
        // $json = json_decode($request, true);
        echo $request;
    }

this's my ajax call :

Ext.Ajax.request({
    url: 'c_places/getPlaces',
    params: {
        "place" : someplace
    },
    success: function(response, opts) {
        var obj = Ext.decode(response.responseText);
        console.dir(obj);
    },
    failure: function(response, opts) {
        console.info('server-side failure with status code ' + response.status);
    }
});

the ajax return a json obj from googleapis, but i don't know how to put this json to the data.store of combobox, Because this call dynamically from user when typing location. So if I put the Ext.data.store in the beginning before combobox, the combobox only show the original store, not from user when typing location. But, before you try this url : http://maps.google.com/maps/api/geocode/json?address="address"&sensor=false

sometimes this url give me a json output, but sometimes give me error "Server not found". I don't know why, until i post this the url show me the error, but this's not a problem, because i've another trick to get the json.

My problem is : 1. Is there a way to load json store dynamically from combobox it self using keyup listener to call my ajax ? i mean, not using other combobox to trigger load from another combobox. 2. Is there a way to create this place autocomplete in using ExtJS 4.2? or Other ideas to solve this?

Any help is greatly appreciated!

Please correct me, if my question didn't focus the problem or my question is too broad or unclear problem statement. I'll gladly edit my post to give more detail.

Answer 1

Ok have a look at this code below, here were are just using a local fixed data source but in your example you would point this at your c_places.php with an appropriate proxy. Since in the example there data source is fixed it is always returning the same data but in your instance you'd have to check for the typed value.

Ext.application({
    name: 'Fiddle',

    launch: function() {
        addressModel = Ext.define("Addresses", {
            extend: 'Ext.data.Model',
            proxy: {
                type: 'jsonp',
                url: 'https://jsonp.nodejitsu.com',
                reader: {
                    type: 'json',
                    root: 'results',
                    totalProperty: 'totalCount'
                }
            },

            fields: ['formatted_address']
        });

        var ds = Ext.create('Ext.data.Store', {
            model: 'Addresses'
        });


        var panel = Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: 'Search the Addresses',
            width: 600,
            bodyPadding: 10,
            layout: 'anchor',

            items: [{
                xtype: 'combo',
                store: ds,
                displayField: 'title',
                typeAhead: false,
                hideLabel: true,
                hideTrigger: true,
                anchor: '100%',
                enableKeyEvents: true,

                listConfig: {
                    loadingText: 'Searching...',
                    emptyText: 'No matching posts found.',

                    // Custom rendering template for each item
                    getInnerTpl: function() {
                        return '<div class="search-item">{formatted_address}</div>';
                    }
                },

                // override default onSelect to do redirect
                listeners: {
                    select: function(combo, selection) {
                        var address = selection[0];
                        if (address) {
                            alert('you picked ' + address.data.formatted_address);
                        }
                    },
                    keyup: function(combo) {
                        queryString = combo.getValue();
                        console.log(queryString);
                        console.log(addressModel);
                        addressModel.getProxy().setExtraParam('url', 'http://maps.google.com/maps/api/geocode/json?address=' + queryString + '&sensor=false');
                    }
                }
            }, {
                xtype: 'component',
                style: 'margin-top:10px',
                html: 'Live search requires a minimum of 4 characters.'
            }]
        });
    }
});

Demo: https://fiddle.sencha.com/#fiddle/g70

Answer 2

Why not instead of use the sencha combobox, use a simple text input as suggest the google api autocomplete documentation. (I first tried with a just common textfield but it didn't work) Then declare a 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);
    },

Now if you want to use this component inside a Panel, there are conflicts with Sencha Styles. So you need to add in html file declaration of google api. ( I tried adding to my css file but it doesn't work either ) The google autocomplete dynamic style:

    <style type="text/css">
        .pac-container {
            z-index: 100000 !important;
        }
    </style>