1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    14
    Vote Rating
    1
    Answers
    1
    truffles mcrooty is on a distinguished road

      0  

    Default Answered: Map View as part of dataview detail

    Answered: Map View as part of dataview detail


    Hi everyone,

    how do I add a map component to a tpl, which forms part of a datalist's detail view? Alternatively, how do I pass data record components from a tpl to a view?

    I've got the lat and lon as data items, thus need to render these accordingly. What I'm struggling with is linking the map view with the tpl containing the data.

    I'm using MVC, with the detail view as a panel, containing a tpl. All views and data are rendering correctly.

    Affected code as follows:

    Code:
    tpl: <div class=fieldset-label id=MapArea style="border: 2px solid #a0a5ab">' +
    'map goes here with lat {storeLat} and lon {storeLon} ' +
    '</div>'
    I've gotten as far as being able to execute a function inline as follows:

    Code:
    tpl: new Ext.XTemplate('<br />' +
                '<div class=fieldset-label id=MapArea style="border: 2px solid #a0a5ab">' +
                'map goes here with lat {storeLat} and lon {storeLon} ' +
                '{[ this.renderStoreMap(values["storeLat"], values["storeLon"]) ]} ' +
                '</div>',
                
                {
                    renderStoreMap: function (storeMapLat, storeMapLon) {
                        var mapPlaceholder = Ext.getCmp('MapContainer');
                        mapPlaceholder.add({
                            xtype: 'storemapview'
                        });
                    }
                }
    Where MapContainer is an xtype in this view and serves as a placeholder.
    The map renders, but I do not know how to pass the lat and lon to the map view :
    Any help would be appreciated!

  2. This may not be the way others have done it, but this is what worked for me.

    First I got my tap listener working by adding this on the itemtap listener for the dataview/list to check I was getting the right info from my store:

    var latitude = record.get('latitude');
    console.log(latitude);

    Then I had the detail panel with an id of e.g. 'googlemap'. Then on click I do an Ext.getCmp('googlemap').setCenter(lat) or whatever (I havn't got the exact syntax to hand here).

    So effectively....just updating the map panel that has an id of googlemap, according to the google maps api. I didn't have the map part in the template, I had 1 map component in the detail panel that was being updated with data using Ext.getCmp on click.

    If I have it to hand next time I can update this post

    :-)

  3. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    Answers
    18
    digeridoopoo will become famous soon enough

      0  

    Default How I did it...

    How I did it...


    This may not be the way others have done it, but this is what worked for me.

    First I got my tap listener working by adding this on the itemtap listener for the dataview/list to check I was getting the right info from my store:

    var latitude = record.get('latitude');
    console.log(latitude);

    Then I had the detail panel with an id of e.g. 'googlemap'. Then on click I do an Ext.getCmp('googlemap').setCenter(lat) or whatever (I havn't got the exact syntax to hand here).

    So effectively....just updating the map panel that has an id of googlemap, according to the google maps api. I didn't have the map part in the template, I had 1 map component in the detail panel that was being updated with data using Ext.getCmp on click.

    If I have it to hand next time I can update this post

    :-)

  4. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    14
    Vote Rating
    1
    Answers
    1
    truffles mcrooty is on a distinguished road

      0  

    Default


    Ended up passing the information to hidden label xtypes - which works a charm!

  5. #4
    Sencha User Pulp Fiction's Avatar
    Join Date
    Mar 2013
    Location
    Italy
    Posts
    79
    Vote Rating
    -1
    Answers
    2
    Pulp Fiction is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by truffles mcrooty View Post
    Ended up passing the information to hidden label xtypes - which works a charm!
    Hi, excuse me but I don't understand what you actually do. Can you post a more concrete code please? I have a dataview with the details regarding a pharmacy and I would also insert a map. Why you use "tpl" and not "itemTpl" for the dataview? Thank you very much

Thread Participants: 2