extjs4 中的 Google 地方信息自动完成功能答案

【问题标题】：Google Places Auto-complete in extjs4extjs4 中的 Google 地方信息自动完成功能
【发布时间】：2013-12-13 10:44:46
【问题描述】：

我在服务器端使用 extjs4 和 Spring。我需要在 extjs4 表单之一中集成 Google Places Auto-complete。有什么办法可以做到这一点。我不确定我们是否可以将 Google 自动完成功能与我搜索过的 extjs 集成，但找不到更符合我要求的内容。请指导我.....看看我的代码......

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

【问题讨论】：

标签： javascript extjs google-maps-api-3 extjs4.2

【解决方案1】：

为什么不使用 sencha 组合框，而是使用简单的文本输入，如 google api 自动完成文档所建议的那样。（我首先尝试使用一个普通的文本字段，但它没有用）然后如下例用html声明一个面板或组件，然后赋值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);
    },

结果如下：

【讨论】：

下面先添加到 index.html

【解决方案2】：

代理不能用于从不同来源的 URL 检索数据。有关详细信息，请参阅 Ext.data.proxy.ajax 的限制部分。

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

如果您想使用该 API，您可能需要在您的服务器上设置一个端点以将请求代理到 Google。

【讨论】：

【解决方案3】：

我正在寻找一种方法来做同样的事情，我想出了一个针对谷歌地图的自定义代理javascript library 然后我在常规组合框中使用了这个自定义代理

组合框：

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
});

自定义代理：（灵感来自 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();
    }

});

注意：我是针对 ExtJs6 编写的，但它对 ExtJs4 的工作原理应该基本相同。

【讨论】：