Google Places自動完成extjs4

Question

我在服務器端使用extjs4和Spring。我需要將Google Places Auto-complete集成到其中一個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' 
           } 
          } 
         }) 
      }] 

}）;

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您的服務器上建立一個端點代理請求，谷歌。

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一樣工作。