Question

我在服务器端使用extjs4和Spring。我需要在其中一个extjs4表单中集成Google Places Auto-complete。有什么方法可以做到这一点。我不确定天气我们可以将Google Auto-complete与我搜索过的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

Answer 1

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

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

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

Answer 2

为什么不使用sencha组合框，使用简单的文本输入作为google api自动完成文档的建议。（我首先尝试使用一个普通的文本字段，但它不起作用）然后使用html声明一个面板或组件，如下例所示，然后分配渲染：

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

结果如下：

Answer 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它应该基本相同。

Google地方信息在extjs4中自动完成

3 个答案: