Google maps marker and Sencha touch 2

I have an application made in Sencha Touch 2 that uses a google map. The position of several markers loaded from the JSON file in the repository will be displayed on the map. My question is: how can I read markers from my store? How can I use data from the store to create tokens?

This is what I have, and THIS WORKS because I have a built-in array of "neighborhood":

Map:

Ext.define('MyApp.view.detalleMapa', {
    extend: 'Ext.Map',
    alias: 'widget.detallemapa',

    config: {
        listeners: [
            {
                fn: 'onMapMaprender',
                event: 'maprender'
            }
        ]
    },

    onMapMaprender: function(map, gmap, options) {

        var neighborhoods = [
        new google.maps.LatLng(52.511467, 13.447179),
        new google.maps.LatLng(52.549061, 13.422975),
        new google.maps.LatLng(52.497622, 13.396110),
        new google.maps.LatLng(52.517683, 13.394393)
        ];


        for (var i = 0; i < neighborhoods.length; i++) {
            var m = neighborhoods[i];

            new google.maps.Marker({
                position: m,
                map: gmap,
                draggable: false,
                animation: google.maps.Animation.DROP
            });
        }
    }

});

Score:

Ext.define('MyApp.store.itemsStore', {
    extend: 'Ext.data.Store',
    alias: 'store.itemsstore',
    requires: [
        'MyApp.model.modelo'
    ],

    config: {
        autoLoad: true,
        model: 'MyApp.model.modelo',
        storeId: 'itemsStoreId',
        proxy: {
            type: 'ajax',
            url: '/markersJsonFormat.json',
            reader: {
                type: 'json',
                rootProperty: ''
            }
        }
    }
});

So far, everything is working fine, because I use neighborhood markers in the map class, but how can I use the array loaded by the repository from the markersJsonFormat.json file?

any idea? Thank you! :)

PD: this is my application:

Ext.application({
    requires: [
        'MyApp.view.override.detalleMapa'
    ],

    models: [
        'modelo'
    ],
    stores: [
        'itemsStore'
    ],
    views: [
        'principalTabPanel',
        'navegacionView',
        'itemsLista',
        'detalleMapa'
    ],
    name: 'MyApp',

    launch: function() {

        Ext.create('MyApp.view.detalleMapa', {fullscreen: true});
    }

});
+3
source share
1 answer

, - :

onMapMaprender: function(map, gmap, options) {

    var store = Ext.getStore('itemsstore'); // Ext.getStore('StoreId')
    var count = store.getCount();
    //debugger;

    store.load({
        scope: this,
        callback: function(records) {
            //debugger;
            this.processTweets(records);
        }
    });
},

, URL- , .

0

All Articles