Javascript Google将自动完成放在extjs4中

我在服务器端使用extjs4和Spring。我需要将GooglePlacesAutoComplete集成到一个extjs4表单中。有没有办法做到这一点。我不确定我们是否可以将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'
                                }
                            }
                        })
            }]

}))

---

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

---

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

为什么不使用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);
    },

xtype:'component'，
html:“”，
听众：{
渲染：函数（）{
var input=document.getElementById（'searchTextField'）；
autocomplete=new google.maps.places.autocomplete（输入，{types:['geocode']}）；
autocomplete.addListener（'place\u changed'，this.fillindAddress）；
},

结果是：

---

我一直在寻找一种方法来做同样的事情，于是我开始编写一个针对谷歌地图的定制代理 然后我在一个常规组合框中使用了这个自定义代理

组合框：

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）

}))

注意：我是针对ExtJs6编写的，但它基本上应该与ExtJs4类似。

首先将下面的内容添加到index.html

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