How to retrieve data from a store in SenCha Touch

Question

Now I have my store: stuStore set up which contains some mock-up data. I have another page which is a google map.

Student data structure: {name, geolocation,value, etc....}

I would like to display each of students info based on their locations which is inside of stuStore onto the google Map.

Btw， here is the code:

Ext.define('myapp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    fullscreen: true,
    requires: [
        'Ext.TitleBar',
        'Ext.Video',
        'Ext.Map',
        'Ext.Panel',
        'Ext.tab.*',
        'Ext.*'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title: 'myapp',
                iconCls:'maps',
                xtype: 'map',
                useCurrentLocation: true,
                store: 'myapp.store.stuStore'
            }

How can I do it?

Thanks in advance.

---

Update 1:

var mapdemo = Ext.create('Ext.Map', {
    mapOptions: {
        center: new google.maps.LatLng(-37.73228, 144.86900),  //nearby San Fran
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.DEFAULT
        }
    },
    title: 'MyApp',
    iconCls: 'maps',
    fullscreen: true,
    xtype: 'map',
    id: 'mainMap',
    useCurrentLocation: false,
    listeners: {
        maprender: function (comp, googleMap) {
            var store, latlng, marker;
            store = Ext.getStore('myapp.store.stuStore');

            store.each(function (record, index, length) {
                latlng = new google.maps.LatLng(record.get('Lat'), record.get('Lng'));

                marker = new google.maps.Marker({
                    position: latlng,
                    map: this
                });
            });     
        }

    }
}),
    infowindow = new google.maps.InfoWindow({
        content: 'Sencha HQ'
    });


Ext.define('myapp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    fullscreen: true,
    config: {
        tabBarPosition: 'bottom',
        items: [mapdemo],
    }
});

This is my updated code in view\Main.js

But I don't get any markers and it keeps throwing an error:

Uncaught TypeError: Cannot call method 'each' of undefined

Btw, the icon on the toolbar which is docked at bottom of the screen is gone as well.

Please point me to the right directions, thank you~~~

Answer 1

You can create markers based on store records by looping through them in the maprender event callback like this:

Ext.define('myapp.controller.MapController', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            mapComponent: 'main map'
        },
        control: {
            mapComponent: {
                maprender: 'onMaprender',
            }
        }
    },
    onMaprender: function(mapComponent, googleMap) {
        var store, latLng, marker;

        // Get store
        store = Ext.getStore('myapp.store.stuStore')

        // On each store record
        store.each(function(record, index, length) {

            // Get position
            latLng = new google.maps.LatLng(record.get('lat'), record.get('lng'));

            // Create marker
            marker = new google.maps.Marker({
                position: latLng,
                map: googleMap
            });
        });
    }
});

Have a look at this Sencha Fiddle I put together.