Map View as part of dataview detail

[truffles mcrooty]

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:

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:

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!

[digeridoopoo]

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

:-)

[truffles mcrooty]

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