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.

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?

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

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

What can I try next?

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.