1. #1
    Sencha User
    Join Date
    Nov 2010
    Location
    Canton, GA, USA
    Posts
    20
    Vote Rating
    1
    pauldugas is on a distinguished road

      0  

    Default Custom Store/Proxy for search combo

    Custom Store/Proxy for search combo


    I'm looking for suggested approaches to building a custom Store/Proxy for use with a combo I'm using as a search field for a map panel. I've been digging through Google and the code looking at the various Ext.data components but I'm not sure where the right place to begin is.

    I've got the combo setup with the trigger hidden. I want the user to start entering text and once enough characters are entered, fire off a call to Google's geocoding API, and have the first few results appear as options for the combobox. I pressing enter or perhaps a second trigger would center the map on the selected entry.

    What the "right" approach here?

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    The GeoCoding API supports JSONP protocol, so you should use a ScriptTagProxy and a JsonReader.

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Location
    Canton, GA, USA
    Posts
    20
    Vote Rating
    1
    pauldugas is on a distinguished road

      0  

    Default


    Thanks Condor. That'll work for this. I'm curious though... If I were to want to use their google.maps.Geocoder class or some other 3rd-party API of some kind, how would one go about building the custom Ext.data.Store et all to wrap it?

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You could use a DirectProxy and write your own 'conversion' methods.

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Location
    Canton, GA, USA
    Posts
    20
    Vote Rating
    1
    pauldugas is on a distinguished road

      0  

    Default


    I tried using JsonStore and ScriptTagProxy per Condor's suggestion but I'm missing something.

    Code:
    this.ds = new Ext.data.JsonStore({
            proxy: new Ext.data.ScriptTagProxy({
              url: 'http://maps.googleapis.com/maps/api/geocode/json'
            }),
            baseParams: { sensor: false },
            idProperty: 'formatted_address',
            successProperty: 'status',
            root: 'results',
            fields: [
              {name: 'types'},
              {name: 'formatted_address'},
              {name: 'address_components'},
              {name: 'geometry'}
            ]
          });
    combo = new Ext.form.ComboBox({
          store: this.ds,
          queryParam: 'address'
          // ...
          });
    I'm getting an "Uncaught SyntaxError: Unexpected token :" error. The returned JSON response looks like so:

    Code:
    { "status": "ZERO_RESULTS", "results": [ ] }
    Isn't it supposed to have the callback call in there? Is JSONP messed up in their newest V3 API?

    EDIT: The JSON is in response to an empty request so the empty "results" is expected. The URL requested was http://maps.googleapis.com/maps/api/...tcCallback1001
    Last edited by pauldugas; 14 Feb 2011 at 7:55 AM. Reason: Premature post...

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Location
    Canton, GA, USA
    Posts
    20
    Vote Rating
    1
    pauldugas is on a distinguished road

      0  

    Default


    Been doing some more reading and it appears JSONP support has been pulled from the V3 version of Google's GeoCoder API. The documentation directs us to their google.maps.Geocoder class instead. So, I'm looking more into your suggestion that I look into using DirectProxy. I've been poking around in the code for a couple hours and I'm not sure where to begin. What "conversion" routines are you referring to?

    Sorry for being a pest.

  7. #7
    Sencha User
    Join Date
    Nov 2010
    Location
    Canton, GA, USA
    Posts
    20
    Vote Rating
    1
    pauldugas is on a distinguished road

      0  

    Default


    So, more digging. Here's what I've come up with. Seems to be working...
    Code:
    Ext.ux.GeocoderProxy = function() {
      var api = {};
      api[Ext.data.Api.actions.read] = true;
      Ext.ux.GeocoderProxy.superclass.constructor.call(this, { api: api });
      this.geocoder = new google.maps.Geocoder();
    }
    Ext.extend(Ext.ux.GeocoderProxy, Ext.data.DataProxy, {
      doRequest: function(action, rs, params, reader, callback, scope, arg) {
        this.geocoder.geocode(params, this.doResponse.createDelegate(this,
          [reader, callback, scope, arg], true));
      },
      doResponse: function(results, status, reader, callback, scope, arg) {
        var success = (status == google.maps.GeocoderStatus.OK);
        for (var i=0, len=results.length; i<len; ++i) { results[i].id = i; }
        callback.call(scope, reader.readRecords({
          success: success,
          results: results
        }), arg, true);
      }
    });
    Ext.ux.GeocoderStore = Ext.extend(Ext.data.Store, {
      constructor: function(config) {
        var c = Ext.apply({}, { /* foo:bar */ }, config);
        Ext.ux.GeocoderStore.superclass.constructor.call(this, Ext.apply(c, {
          proxy: new Ext.ux.GeocoderProxy(),
          reader: new Ext.data.ArrayReader({
            successProperty: 'success',
            root: 'results'
          }, [
            {name: 'id',         mapping: 'id' },
            {name: 'address',    mapping: 'formatted_address' },
            {name: 'components', mapping: 'address_components' },
            {name: 'types',      mapping: 'types' },
            {name: 'geometry',   mapping: 'geometry' }
          ])
        }));
      }
    });
    Last edited by pauldugas; 15 Feb 2011 at 6:40 AM. Reason: Forgot the Store

Similar Threads

  1. Search cached grid data a-la proxy.
    By j11extjs in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 5 Nov 2010, 1:55 AM
  2. Change proxy store combo
    By nicobarten in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 2 Oct 2009, 2:17 AM
  3. How To Search NotesView w/ Custom Search Field
    By waldav00 in forum Ext.nd for Notes/Domino
    Replies: 4
    Last Post: 5 Mar 2008, 7:33 AM
  4. Remote Combo box with custom HTML highlighting search string
    By jay@moduscreate.com in forum Community Discussion
    Replies: 6
    Last Post: 4 Dec 2007, 12:32 PM
  5. add id to Store proxy for combo list
    By bhomass in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 21 Oct 2007, 5:57 PM

Thread Participants: 1