Sencha Touch - how to re-initialize a map view from a controller

Question

I would like to re-initialize my map view after a certain action performed in the controller.

This is my mapview:

Ext.define("App.view.MapView", {
extend: 'Ext.Container',
requires: [
    'Ext.device.Geolocation',
    'Ext.MessageBox'
],
xtype: 'mapview',

constructor: function () {
    this.callParent(arguments);
    this.element.setVisibilityMode(Ext.Element.OFFSETS);
    this.on('painted', this.renderMap, this);
},

renderMap: function(){
        var me = this,
            lat = localStorage.getItem('latitude'),
            lng = localStorage.getItem('longitude'), 
            geo = [lat, lng];

        var map = L.map('map', {
            center: geo, 
            zoom: 13
        });

        var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);    

        var marker = L.marker(geo, {
            draggable: true,
            title: 'Your position'
        }).addTo(map);
}
});

How do I get and reset(re-initialize) my map view? I tried to make a reference to the mapview in the controller:

config: {
    refs: {
        mapCmp: 'mapview',
    },

And then called it like this:

this.getApplication().getMapCmp.reset();

But it didn't work - I got 'function is undefined'. Basically I need it to initialize again like when the app starts up.

Please advise.

Answer 1

You get function is undefined message because the reset() function is not defined in your view.

However, if you want to initialize the MapView, you need to use the initialize() function. Add it in your file:

Ext.define("App.view.MapView", {
extend: 'Ext.Container',
requires: [
    'Ext.device.Geolocation',
    'Ext.MessageBox'
],
xtype: 'mapview',

constructor: function () {
    this.callParent(arguments);
    this.element.setVisibilityMode(Ext.Element.OFFSETS);
    this.on('painted', this.renderMap, this);
},

initialize: function() {
    // This function is launched each time the application starts up
}

renderMap: function(){
        var me = this,
            lat = localStorage.getItem('latitude'),
            lng = localStorage.getItem('longitude'), 
            geo = [lat, lng];

        var map = L.map('map', {
            center: geo, 
            zoom: 13
        });

        var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);    

        var marker = L.marker(geo, {
            draggable: true,
            title: 'Your position'
        }).addTo(map);
},
});